/* YiMedia Player Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Status bar */
.status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 32px;
    background: rgba(0, 0, 0, 0.8);
    display: -webkit-box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit--webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit--webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding: 0 16px;
    color: #fff;
    font-size: 12px;
    z-index: 9999;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
}

.status-bar.hidden {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

.status-bar .indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5252;
}

.status-bar .indicator.connected {
    background: #4CAF50;
}

/* Offline mode indicator - Orange/Yellow */
.status-bar .indicator.offline {
    background: #FF9800;
}

/* Player container */
.player-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
}

/* Waiting screen */
.waiting-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit--webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit--webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: #0D1117;
    z-index: 100;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.waiting-screen.hidden {
    opacity: 0;
    pointer-events: none;
    /* visibility flips AFTER the 0.5s fade so the fade still shows, then the
       layer leaves compositing entirely. Field rk3288: this overlay is never
       removed, only faded, and its spinner kept rotating behind it forever —
       a compositor frame every vsync on a page that should be idle. */
    visibility: hidden;
    -webkit-transition: opacity 0.5s ease, visibility 0s linear 0.5s;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.waiting-screen.hidden .wait-spinner {
    -webkit-animation: none;
    animation: none;
}

.waiting-content {
    text-align: center;
    color: #E6EDF3;
}

/* Thin spinner ring — replaces the pulsing emoji logo */
.wait-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 28px auto;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #409EFF;
    border-radius: 50%;
    -webkit-animation: wait-rotate 1s linear infinite;
    animation: wait-rotate 1s linear infinite;
}

@-webkit-keyframes wait-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes wait-rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.waiting-content h1 {
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    color: #E6EDF3;
}

.waiting-content p {
    font-size: 15px;
    color: #8B949E;
}

/* Pending-approval notice: quiet amber pill under the status line */
.approval-notice {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 14px;
    font-size: 13px;
    color: #D29922;
    background: rgba(210, 153, 34, 0.08);
    border: 1px solid rgba(210, 153, 34, 0.35);
    border-radius: 14px;
}

.device-info:empty {
    display: none;
}

.device-info {
    margin-top: 28px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 16px;
    display: table; /* shrink-to-fit on its own centered line */
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    font-family: monospace;
    font-size: 12px;
    color: #8B949E;
}

/* Play zones container */
.play-zones {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Individual play zone */
.play-zone {
    position: absolute;
    overflow: hidden;
    background: transparent;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Image element - object-fit: fill to match CMS editor's stretching behavior */
.play-zone img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.play-zone img.active {
    opacity: 1;
}

/* Video element - PRODUCTION FIX: Hide ALL controls/overlays and placeholder */
.play-zone video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: #000 !important;
    /* HIDE ALL CONTROLS AND PLACEHOLDER */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    /* HIDE NATIVE VIDEO PLACEHOLDER - CRITICAL FIX */
    visibility: hidden !important;
    display: none !important;
    opacity: 0 !important;
    z-index: 1 !important;
}

/* PRODUCTION FIX: Show video ONLY when it has started playing */
.play-zone video.playing {
    visibility: visible !important;
    display: block !important;
    opacity: 1 !important;
}

/* PRODUCTION FIX: Hide ALL WebKit media controls and overlays */
.play-zone video::-webkit-media-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.play-zone video::-webkit-media-controls-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.play-zone video::-webkit-media-controls-overlay-enclosure {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}
.play-zone video::-webkit-media-controls-start-playback-button {
    display: none !important;
    visibility: hidden !important;
}
.play-zone video::-webkit-media-controls-toggle-closed-captions-button {
    display: none !important;
    visibility: hidden !important;
}

/* PRODUCTION FIX: Hide video play button overlay (Android WebView specific) */
.play-zone video::media-media-controls {
    display: none !important;
}
.play-zone video::cue {
    display: none !important;
}

/* PRODUCTION FIX: Remove tap highlight on video */
.play-zone video {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Zone background is set per-zone in JS:
   - Fullscreen zones: #000 (prevents white flash before video loads)
   - Non-fullscreen zones: transparent (allows lower layers to show through)
   Do NOT set a global opaque background here — it breaks multi-layer rendering. */

/* PRODUCTION FIX: Hide ALL video shadows and outlines */
.play-zone video {
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
}

/* PRODUCTION FIX: Force video to fill zone */
.play-zone video {
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* PRODUCTION FIX: Hide native video elements that aren't playing */
.play-zone video[paused] {
    opacity: 1 !important;
}

/* Image slideshow container */
.slideshow {
    position: relative;
    width: 100%;
    height: 100%;
    /* Needed for stereo rotation and 3D effects */
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Ensure images match editor's fill logic */
}

/* Widget common styles */
.widget {
    padding: 16px;
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit--webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit--webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Weather widget */
.weather-widget {
    -webkit--webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.weather-widget .temp {
    font-size: 48px;
    font-weight: 300;
}

.weather-widget .location {
    font-size: 16px;
    opacity: 0.8;
}

/* Clock widget */
.clock-widget {
    -webkit--webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.clock-widget .time {
    font-size: 64px;
    font-weight: 200;
    font-family: 'Courier New', monospace;
}

.clock-widget .date {
    font-size: 18px;
    opacity: 0.8;
}

/* Text widget */
.text-widget {
    background: transparent;
    font-size: 24px;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.text-widget.ticker {
    white-space: nowrap;
    -webkit-animation: ticker 20s linear infinite;
    animation: ticker 20s linear infinite;
}

@-webkit-keyframes ticker {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

@keyframes ticker {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}

/* Web/iframe widget */
.web-widget {
    padding: 0;
    overflow: hidden;
}

.web-widget iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    opacity: 0; /* Add opacity to hide the white background during load */
    transition: opacity 0.3s ease; /* Smooth transition */
}
/* Class to add when loaded */
.web-widget iframe.loaded {
    opacity: 1;
}

/* Debug panel - improved visibility and scrolling */
.debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40vh;
    max-height: 300px;
    min-height: 150px;
    background: rgba(0, 0, 0, 0.95);
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 12px;
    z-index: 10000;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    display: -webkit-box;
    display: -webkit-flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit--webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    border-top: 2px solid #00ff00;
}

.debug-panel.hidden {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.debug-panel h3 {
    margin: 0 0 8px 0;
    padding-bottom: 8px;
    color: #00ff00;
    font-size: 14px;
    border-bottom: 1px solid #333;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.debug-panel pre {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 8px;
    background: rgba(0, 20, 0, 0.5);
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
    -webkit-overflow-scrolling: touch;
}

/* Debug toolbar buttons */
.debug-toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.debug-btn {
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 4px 12px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    border-radius: 4px;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

.debug-btn:hover {
    background: rgba(0, 255, 0, 0.2);
}

.debug-btn:active {
    background: rgba(0, 255, 0, 0.3);
}

.debug-btn-close {
    margin-left: auto;
    background: rgba(255, 82, 82, 0.2);
    border-color: #ff5252;
    color: #ff5252;
}

.debug-btn-close:hover {
    background: rgba(255, 82, 82, 0.3);
}

/* Log viewer modal */
.log-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10001;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.log-viewer-modal.hidden {
    display: none;
}

.log-viewer-content {
    width: 90%;
    max-width: 900px;
    height: 80vh;
    max-height: 600px;
    background: rgba(0, 0, 0, 0.95);
    border: 2px solid #00ff00;
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    overflow: hidden;
}

.log-viewer-header {
    padding: 12px 16px;
    border-bottom: 1px solid #333;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.log-viewer-header h3 {
    margin: 0;
    color: #00ff00;
    font-size: 16px;
}

.log-viewer-toolbar {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}

.log-viewer-content-inner {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 12px;
    background: rgba(0, 20, 0, 0.5);
    color: #00ff00;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
}

/* Transitions */
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
}

/* Slide transitions */
.slide-left-enter {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.slide-left-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
}

.slide-right-enter {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.slide-right-enter-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
}

/* Traffic Widget Styles */
.qk-traffic {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
    overflow: hidden !important;
    box-sizing: border-box;
}

.qk-traffic .traffic-inner {
    width: 400px;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.qk-traffic .bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.qk-traffic .traffic-content {
    position: relative;
    z-index: 2;
    padding: 18px;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
}

.qk-traffic .location-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 12px;
}

.qk-traffic .location-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.qk-traffic .location-info {
    flex: 1;
    min-width: 0;
}

.qk-traffic .city-name {
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.5px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.qk-traffic .city-subtitle {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: -2px;
}

.qk-traffic .traffic-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.qk-traffic .traffic-badge.low {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.qk-traffic .traffic-badge.moderate {
    background: #fef9c3;
    color: #854d0e;
    border-color: #fef08a;
}

.qk-traffic .traffic-badge.heavy {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fed7aa;
}

.qk-traffic .traffic-badge.severe {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.qk-traffic .traffic-summary {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 8px;
}

.qk-traffic .summary-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    flex: 1;
}

.qk-traffic .summary-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}

.qk-traffic .summary-info {
    display: flex;
    flex-direction: column;
}

.qk-traffic .summary-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}

.qk-traffic .summary-label {
    font-size: 9px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 600;
    margin-top: 2px;
}

.qk-traffic .delay-card .summary-value {
    color: #eab308;
    font-size: 22px;
}

.qk-traffic .section-title {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Top Roads Carousel */
.qk-traffic .top-roads-carousel {
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.qk-traffic .road-incident-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-radius: 10px;
    backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-flex: 1;
    flex: 1;
}

.qk-traffic .road-incident-card .incident-left {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.qk-traffic .road-incident-card .incident-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.qk-traffic .road-incident-card .incident-details {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 4px;
}

.qk-traffic .road-incident-card .incident-type {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #1e293b;
}

/* Shared: incident-road-line */
.qk-traffic .incident-road-line {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    opacity: 0.9;
    min-width: 0;
}

.qk-traffic .incident-road-line .road-icon {
    font-size: 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.qk-traffic .incident-road-line .road-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Shared: stat-chip row */
.qk-traffic .incident-stats-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.qk-traffic .stat-chip {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.qk-traffic .delay-chip {
    background: rgba(241, 196, 15, 0.2);
    color: #eab308;
}

.qk-traffic .length-chip {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #d1fae5;
}

/* Shared: incident location & description */
.qk-traffic .incident-location-line {
    font-size: 11px;
    color: #475569;
    opacity: 0.7;
}

.qk-traffic .incident-location-line .loc-pin {
    font-size: 10px;
}

.qk-traffic .incident-desc-box {
    font-size: 11px;
    color: #475569;
    line-height: 1.3;
    font-style: italic;
    background: #f8fafc;
    padding: 4px 8px;
    border-radius: 6px;
    border-left: 2px solid #e2e8f0;
}

/* Legacy: keep for backward compat */
.qk-traffic .incident-breakdown {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
}

.qk-traffic .breakdown-grid {
    display: -ms-grid;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.qk-traffic .breakdown-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.qk-traffic .breakdown-icon {
    font-size: 18px;
}

.qk-traffic .breakdown-count {
    font-size: 18px;
    font-weight: 700;
}

.qk-traffic .breakdown-type {
    font-size: 12px;
    opacity: 0.9;
}

.qk-traffic .incident-carousel {
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.qk-traffic .carousel-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 6px;
}

.qk-traffic .carousel-counter {
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.qk-traffic .carousel-card {
    display: none;
    opacity: 0;
    -webkit-transition: opacity 0.4s ease;
    transition: opacity 0.4s ease;
}

.qk-traffic .carousel-card.active {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
    opacity: 1;
}

.qk-traffic .carousel-dots {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.qk-traffic .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    transition: all 0.3s ease;
}

.qk-traffic .carousel-dots .dot.active {
    background: #64748b;
    transform: scale(1.3);
}

/* Carousel title */
.qk-traffic .carousel-title {
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
}

.qk-traffic .carousel-title-icon {
    font-size: 12px;
}

/* Carousel inner layout */
.qk-traffic .carousel-wrapper {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.qk-traffic .cards-container {
    -webkit-box-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* Legacy location/meta styles (kept) */
.qk-traffic .incident-location .location-text {
    font-size: 12px;
    opacity: 0.85;
}

.qk-traffic .incident-meta {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px;
}

.qk-traffic .incident-meta .meta-item {
    font-size: 11px;
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
}

.qk-traffic .last-updated {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    opacity: 0.7;
    margin-top: 8px;
}

.qk-traffic .update-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CAF50;
    display: inline-block;
}

.qk-traffic .incident-card {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: white;
    border-radius: 10px;
    backdrop-filter: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-flex: 1;
    flex: 1;
}

.qk-traffic .incident-card .incident-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.qk-traffic .incident-details {
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.qk-traffic .incident-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
}

.qk-traffic .incident-type {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #1e293b;
}

.qk-traffic .incident-severity-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    text-transform: uppercase;
}

.qk-traffic .incident-severity-badge.sev-1 {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.qk-traffic .incident-severity-badge.sev-2 {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.qk-traffic .incident-severity-badge.sev-3 {
    background: #ffedd5;
    color: #9a3412;
    border: 1px solid #fed7aa;
}

.qk-traffic .incident-severity-badge.sev-4,
.qk-traffic .incident-severity-badge.sev-5 {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Legacy: incident-road (kept for backward compat) */
.qk-traffic .incident-road {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.15);
    padding: 4px 8px;
    border-radius: 6px;
}

.qk-traffic .road-icon {
    font-size: 12px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.qk-traffic .road-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Legacy: incident-desc (kept) */
.qk-traffic .incident-desc {
    font-size: 11px;
    color: #475569;
    line-height: 1.4;
    font-style: italic;
    background: #f8fafc;
    padding: 6px 10px;
    border-radius: 6px;
    border-left: 2px solid #e2e8f0;
}

.qk-traffic .no-incidents {
    text-align: center;
    margin-top: 40px;
}

.qk-traffic .no-incidents .clear-icon {
    font-size: 48px;
    color: #67C23A;
    margin-bottom: 8px;
}

.qk-traffic .traffic-placeholder {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: #64748b;
}

.qk-traffic .placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* Weather Widget Styles */
.qk-weather {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: white;
    overflow: hidden;
}

.qk-weather .weather-inner {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}

.qk-weather .bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    transition: background 0.5s ease;
}

.qk-weather .weather-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.qk-weather .location-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-left: 8px;
    margin-bottom: 20px;
}

.qk-weather .location-icon {
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.qk-weather .city-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.qk-weather .country-code {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

.qk-weather .main-weather {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
    margin-left: 16px;
    margin-bottom: 20px;
    flex: 1;
}

.qk-weather .weather-icon {
    width: 80px;
    height: 80px;
    font-size: 70px;
    line-height: 80px;
    text-align: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.qk-weather .temperature-display {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    line-height: 1;
}

.qk-weather .temp-value {
    font-size: 64px;
    font-weight: 200;
    letter-spacing: -2px;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.qk-weather .temp-unit {
    font-size: 24px;
    font-weight: 300;
    margin-top: 8px;
    margin-left: 4px;
    opacity: 0.9;
}

.qk-weather .weather-desc {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.qk-weather .details-grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    gap: 12px;
    margin-top: 12px;
    margin-left: 12px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 10px;
}

.qk-weather .detail-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 12px;
    flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-left: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.qk-weather .detail-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.qk-weather .detail-info {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.qk-weather .detail-value {
    font-size: 16px;
    font-weight: 700;
}

.qk-weather .detail-label {
    font-size: 11px;
    opacity: 0.8;
    text-transform: uppercase;
    margin-top: 2px;
}

.qk-weather .weather-placeholder {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
}

.qk-weather .placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

/* Scrollbar styling for native player widgets */
.qk-traffic ::-webkit-scrollbar {
    width: 4px;
}

.qk-traffic ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.qk-traffic ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* Custom Effects */

/* Base transition override for custom effects */
.slideshow:not(.effect-fade) img {
    -webkit-transition: none !important;
    transition: none !important;
    /* Hide non-active images immediately to prevent ghosting */
    opacity: 0;
}

.slideshow:not(.effect-fade) img.active,
.slideshow:not(.effect-fade) img.outgoing {
    opacity: 1;
    /* Both incoming and outgoing must be visible during animation */
}

/* 1. None (Default to instant switch) */
.slideshow.effect-none img.active {
    opacity: 1;
}

.slideshow.effect-none img.outgoing {
    opacity: 0;
}

/* 2. Fade (Standard crossfade) */
/* Fade is handled by default opacity transitions on .play-zone img, but let's reinforce */
.slideshow.effect-fade img {
    -webkit-transition: opacity 1s ease !important;
    transition: opacity 1s ease !important;
}

/* 3. Zoom (Standard zoom-in fade) */
.slideshow.effect-zoom img {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    opacity: 0;
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important;
}

.slideshow.effect-zoom img.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

/* -------------------------------------------------------------------------
   TRANSLATION EFFECTS
   ------------------------------------------------------------------------- */

/* 4. Pan (Left to Right wipe/slide) */
.slideshow.effect-pan img.active {
    -webkit-animation: slideInLeft 1s forwards;
    animation: slideInLeft 1s forwards;
}

.slideshow.effect-pan img.outgoing {
    -webkit-animation: slideOutRight 1s forwards;
    animation: slideOutRight 1s forwards;
}

/* 5. Top right in top left out */
.slideshow.effect-top_right_in_left_out img.active {
    -webkit-animation: slideInTopRight 1s forwards;
    animation: slideInTopRight 1s forwards;
}

.slideshow.effect-top_right_in_left_out img.outgoing {
    -webkit-animation: slideOutTopLeft 1s forwards;
    animation: slideOutTopLeft 1s forwards;
}

/* 6. Back entry (Zoom in from distance) */
.slideshow.effect-back_entry img.active {
    -webkit-animation: zoomInBack 1s forwards;
    animation: zoomInBack 1s forwards;
}

.slideshow.effect-back_entry img.outgoing {
    -webkit-animation: zoomOutFront 1s forwards;
    animation: zoomOutFront 1s forwards;
}

/* 7. Front entry (Zoom out from viewer) */
.slideshow.effect-front_entry img.active {
    -webkit-animation: zoomInFront 1s forwards;
    animation: zoomInFront 1s forwards;
}

.slideshow.effect-front_entry img.outgoing {
    -webkit-animation: zoomOutBack 1s forwards;
    animation: zoomOutBack 1s forwards;
}

/* 8. Vertical translation (Slide Down) */
.slideshow.effect-vertical_translation img.active,
.slideshow.effect-vertical_translation_single img.active {
    -webkit-animation: slideInTop 1s forwards;
    animation: slideInTop 1s forwards;
}

.slideshow.effect-vertical_translation img.outgoing,
.slideshow.effect-vertical_translation_single img.outgoing {
    -webkit-animation: slideOutBottom 1s forwards;
    animation: slideOutBottom 1s forwards;
}

/* 9. Horizontal translation of single graph (Slide Right) */
.slideshow.effect-horizontal_translation_single img.active {
    -webkit-animation: slideInLeft 1s forwards;
    animation: slideInLeft 1s forwards;
}

.slideshow.effect-horizontal_translation_single img.outgoing {
    -webkit-animation: slideOutRight 1s forwards;
    animation: slideOutRight 1s forwards;
}


/* -------------------------------------------------------------------------
   3D & ROTATION EFFECTS
   ------------------------------------------------------------------------- */

/* 10. Inner stereo rotation (Cube rotating inwards) */
.slideshow.effect-inner_stereo_rotation img.active {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: cubeInLeft 1s forwards;
    animation: cubeInLeft 1s forwards;
}

.slideshow.effect-inner_stereo_rotation img.outgoing {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-animation: cubeOutRight 1s forwards;
    animation: cubeOutRight 1s forwards;
}

/* 11. Outer stereo rotation (Cube rotating outwards) */
.slideshow.effect-outer_stereo_rotation img.active {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-animation: cubeInRight 1s forwards;
    animation: cubeInRight 1s forwards;
}

.slideshow.effect-outer_stereo_rotation img.outgoing {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-animation: cubeOutLeft 1s forwards;
    animation: cubeOutLeft 1s forwards;
}

/* 12. Flip horizontal (Card flip Y) */
.slideshow.effect-flip_horizontal img.active {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: flipInY 1s forwards;
    animation: flipInY 1s forwards;
}

.slideshow.effect-flip_horizontal img.outgoing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: flipOutY 1s forwards;
    animation: flipOutY 1s forwards;
}

/* 13. Vertical, flip (Card flip X) */
.slideshow.effect-vertical_flip img.active {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: flipInX 1s forwards;
    animation: flipInX 1s forwards;
}

.slideshow.effect-vertical_flip img.outgoing {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: flipOutX 1s forwards;
    animation: flipOutX 1s forwards;
}

/* 14. Rotate down (Swing from top hinge) */
.slideshow.effect-rotate_down img.active {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swingInTop 1s forwards;
    animation: swingInTop 1s forwards;
}

.slideshow.effect-rotate_down img.outgoing {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: swingOutBottom 1s forwards;
    animation: swingOutBottom 1s forwards;
}

/* 15. Rotate up (Swing from bottom hinge) */
.slideshow.effect-rotate_up img.active {
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation: swingInBottom 1s forwards;
    animation: swingInBottom 1s forwards;
}

.slideshow.effect-rotate_up img.outgoing {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation: swingOutTop 1s forwards;
    animation: swingOutTop 1s forwards;
}

/* -------------------------------------------------------------------------
   SCALE EFFECTS
   ------------------------------------------------------------------------- */

/* 16. Gradually shrink (Slow zoom out) */
.slideshow.effect-gradually_shrink img.active {
    -webkit-animation: shrinkIn 5s linear forwards;
    animation: shrinkIn 5s linear forwards;
    /* Longer animation for "gradual" feel */
}

.slideshow.effect-gradually_shrink img.outgoing {
    opacity: 0;
}

/* 17. Gradually enlarge (Slow zoom in) */
.slideshow.effect-gradually_enlarge img.active {
    -webkit-animation: enlargeIn 5s linear forwards;
    animation: enlargeIn 5s linear forwards;
}

.slideshow.effect-gradually_enlarge img.outgoing {
    opacity: 0;
}

/* 18. Slide zoom gradient (Pan and Zoom simultaneously) */
.slideshow.effect-slide_zoom_gradient img.active {
    -webkit-animation: slideZoomIn 5s linear forwards;
    animation: slideZoomIn 5s linear forwards;
}

.slideshow.effect-slide_zoom_gradient img.outgoing {
    opacity: 0;
}

/* =========================================================================
   KEYFRAMES DEFINITIONS
   ========================================================================= */

/* Translations */
@-webkit-keyframes slideInLeft {
    from {
        -webkit-transform: translateX(-100%);
    }

    to {
        -webkit-transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes slideOutRight {
    from {
        -webkit-transform: translateX(0);
    }

    to {
        -webkit-transform: translateX(100%);
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(100%);
    }
}

@-webkit-keyframes slideInTopRight {
    from {
        -webkit-transform: translate(100%, -100%);
    }

    to {
        -webkit-transform: translate(0, 0);
    }
}

@keyframes slideInTopRight {
    from {
        transform: translate(100%, -100%);
    }

    to {
        transform: translate(0, 0);
    }
}

@-webkit-keyframes slideOutTopLeft {
    from {
        -webkit-transform: translate(0, 0);
    }

    to {
        -webkit-transform: translate(-100%, -100%);
    }
}

@keyframes slideOutTopLeft {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-100%, -100%);
    }
}

@-webkit-keyframes slideInTop {
    from {
        -webkit-transform: translateY(-100%);
    }

    to {
        -webkit-transform: translateY(0);
    }
}

@keyframes slideInTop {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

@-webkit-keyframes slideOutBottom {
    from {
        -webkit-transform: translateY(0);
    }

    to {
        -webkit-transform: translateY(100%);
    }
}

@keyframes slideOutBottom {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(100%);
    }
}

/* Depths */
@-webkit-keyframes zoomInBack {
    from {
        -webkit-transform: scale(0.5);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomInBack {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes zoomOutFront {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes zoomOutFront {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.5);
        opacity: 0;
    }
}

@-webkit-keyframes zoomInFront {
    from {
        -webkit-transform: scale(1.5);
        opacity: 0;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomInFront {
    from {
        transform: scale(1.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes zoomOutBack {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(0.5);
        opacity: 0;
    }
}

@keyframes zoomOutBack {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.5);
        opacity: 0;
    }
}

/* 3D Cubes */
@-webkit-keyframes cubeInLeft {
    from {
        -webkit-transform: rotateY(-90deg) translateZ(50vw);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@keyframes cubeInLeft {
    from {
        transform: rotateY(-90deg) translateZ(50vw);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeOutRight {
    from {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(90deg) translateZ(50vw);
        opacity: 0;
    }
}

@keyframes cubeOutRight {
    from {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }

    to {
        transform: rotateY(90deg) translateZ(50vw);
        opacity: 0;
    }
}

@-webkit-keyframes cubeInRight {
    from {
        -webkit-transform: rotateY(90deg) translateZ(50vw);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@keyframes cubeInRight {
    from {
        transform: rotateY(90deg) translateZ(50vw);
        opacity: 0;
    }

    to {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }
}

@-webkit-keyframes cubeOutLeft {
    from {
        -webkit-transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(-90deg) translateZ(50vw);
        opacity: 0;
    }
}

@keyframes cubeOutLeft {
    from {
        transform: rotateY(0deg) translateZ(0);
        opacity: 1;
    }

    to {
        transform: rotateY(-90deg) translateZ(50vw);
        opacity: 0;
    }
}

/* Flips */
@-webkit-keyframes flipInY {
    from {
        -webkit-transform: rotateY(-180deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateY(0);
        opacity: 1;
    }
}

@keyframes flipInY {
    from {
        transform: rotateY(-180deg);
        opacity: 0;
    }

    to {
        transform: rotateY(0);
        opacity: 1;
    }
}

@-webkit-keyframes flipOutY {
    from {
        -webkit-transform: rotateY(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateY(180deg);
        opacity: 0;
    }
}

@keyframes flipOutY {
    from {
        transform: rotateY(0);
        opacity: 1;
    }

    to {
        transform: rotateY(180deg);
        opacity: 0;
    }
}

@-webkit-keyframes flipInX {
    from {
        -webkit-transform: rotateX(-180deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes flipInX {
    from {
        transform: rotateX(-180deg);
        opacity: 0;
    }

    to {
        transform: rotateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes flipOutX {
    from {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(180deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    from {
        transform: rotateX(0);
        opacity: 1;
    }

    to {
        transform: rotateX(180deg);
        opacity: 0;
    }
}

/* Swings (Rotate Up/Down) */
@-webkit-keyframes swingInTop {
    from {
        -webkit-transform: rotateX(-90deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes swingInTop {
    from {
        transform: rotateX(-90deg);
        opacity: 0;
    }

    to {
        transform: rotateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes swingOutBottom {
    from {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }
}

@keyframes swingOutBottom {
    from {
        transform: rotateX(0);
        opacity: 1;
    }

    to {
        transform: rotateX(90deg);
        opacity: 0;
    }
}

@-webkit-keyframes swingInBottom {
    from {
        -webkit-transform: rotateX(90deg);
        opacity: 0;
    }

    to {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }
}

@keyframes swingInBottom {
    from {
        transform: rotateX(90deg);
        opacity: 0;
    }

    to {
        transform: rotateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes swingOutTop {
    from {
        -webkit-transform: rotateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: rotateX(-90deg);
        opacity: 0;
    }
}

@keyframes swingOutTop {
    from {
        transform: rotateX(0);
        opacity: 1;
    }

    to {
        transform: rotateX(-90deg);
        opacity: 0;
    }
}

/* Slow Scales */
@-webkit-keyframes shrinkIn {
    from {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}

@keyframes shrinkIn {
    from {
        transform: scale(1.2);
        opacity: 1;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes enlargeIn {
    from {
        -webkit-transform: scale(1);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(1.2);
        opacity: 1;
    }
}

@keyframes enlargeIn {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.2);
        opacity: 1;
    }
}

@-webkit-keyframes slideZoomIn {
    from {
        -webkit-transform: scale(1) translateX(0);
        opacity: 1;
    }

    to {
        -webkit-transform: scale(1.2) translateX(-5%);
        opacity: 1;
    }
}

@keyframes slideZoomIn {
    from {
        transform: scale(1) translateX(0);
        opacity: 1;
    }

    to {
        transform: scale(1.2) translateX(-5%);
        opacity: 1;
    }
}

/* A layer parked by visibility cycling must not keep animating: its pan /
   scroll effects would otherwise burn compositor time the VISIBLE layer needs
   (measured on the rk3288 field box: WebView repaints seconds late). */
.layer-hidden,
.layer-hidden * {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}