/* =========================================================
   BROWSER COMPATIBILITY
   Loaded AFTER all other stylesheets.
   Keeps Chrome appearance as the reference.
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

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


/* ---------------------------------------------------------
   MOBILE / SAFARI TOUCH SCROLLING
   --------------------------------------------------------- */

#model-section #model-control #models-list,
#image-view {
    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------
   STICKY POSITIONING
   --------------------------------------------------------- */

.header-group {
    position: -webkit-sticky;
    position: sticky;
}

.list-switcher {
    position: -webkit-sticky;
    position: sticky;
}


/* ---------------------------------------------------------
   BACKDROP FILTER
   --------------------------------------------------------- */

.header-group {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}


/* ---------------------------------------------------------
   INSET FALLBACK
   --------------------------------------------------------- */

#page-loader-element {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    inset: 0;
}


/* ---------------------------------------------------------
   COLOR-MIX FALLBACK
   ---------------------------------------------------------

   Modern browsers use color-mix().
   Older browsers get a visually similar solid fallback.
   --------------------------------------------------------- */

.bg-em {
    background-color: var(--poknet-bg-light-2);
}

.dark-mode-enabled .bg-em {
    background-color: var(--poknet-bg-dark);
}

@supports (background-color: color-mix(in srgb, white 50%, black)) {
    .bg-em {
        background-color: color-mix(in srgb, var(--bg) 90%, black);
    }
}


/* ---------------------------------------------------------
   RGB ALPHA FALLBACK
   --------------------------------------------------------- */

.dark-mode-enabled .header-group {
    background-color: rgba(184, 50, 47, 1) !important;
}


/* ---------------------------------------------------------
   HIDDEN SCROLLBARS
   --------------------------------------------------------- */

#model-section #model-control #models-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#model-section #model-control #models-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}


/* ---------------------------------------------------------
   IMAGE / VIDEO RENDERING
   --------------------------------------------------------- */

img,
video {
    max-width: 100%;
}


/* ---------------------------------------------------------
   ANIMATION PERFORMANCE
   --------------------------------------------------------- */

.bg-video {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.fade-in-opacity-slide,
.fade-out-opacity,
.color-shift-emphasys,
.color-shift-emphasys-softer {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


/* ---------------------------------------------------------
   SAFARI / IOS TAP BEHAVIOR
   --------------------------------------------------------- */

.pointer,
#model-section #model-control #models-list .li-i,
#model-section #model-control #models-buttons div,
.list-switcher,
.enable-cookies-1 {
    -webkit-tap-highlight-color: transparent;
}


/* ---------------------------------------------------------
   MODERN VIEWPORT FALLBACK
   ---------------------------------------------------------

   Keep your existing vh-based layout as the fallback.
   Modern browsers use the dynamic viewport where useful.
   --------------------------------------------------------- */

@supports (height: 100dvh) {
    #page-loader-element {
        min-height: 100dvh;
    }
}


/* ---------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------

   Accessibility + avoids animation problems on browsers/
   devices configured to reduce motion.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}


/* ---------------------------------------------------------
   :has() FALLBACK

   Modern browsers support your existing:

       body:has(.opacity25:hover) .opacity25

   There is no clean CSS equivalent for older browsers.
   The normal opacity behavior remains intact there.
   --------------------------------------------------------- */

@supports not selector(body:has(.opacity25:hover)) {

    .opacity25:hover {
        opacity: 1;
    }

}


/* ---------------------------------------------------------
   FLEXBOX SAFETY
   --------------------------------------------------------- */

.header-group #logo,
.header-group #logo a,
#header-landscape .settings-space-group,
#image-view,
#image-view-controls,
#image-view-controls > div {
    min-width: 0;
}


/* ---------------------------------------------------------
   CANVAS
   --------------------------------------------------------- */

canvas {
    display: block;
    max-width: 100%;
}