/* ═══════════════════════════════════════════════════════════════════════════════
   SIS Portal — Advertisement System  (v2 — Splash Screen)

   Desktop  : centered popup overlay, X close button, optional auto-close
   Mobile   : FULLSCREEN SPLASH SCREEN — covers 100 % viewport, no close
              button, auto-close with countdown timer bar, object-fit:cover
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Early-blocking: mobile content stays invisible until ad finishes ──
   .sis-ad-block is added by an inline <script> right after <body>
   (in _Layout.cshtml) so it takes effect BEFORE the browser paints
   any portal content. sis-ads.js removes it when the ad is dismissed. */
body.sis-ad-block .sis-portal,
body.sis-ad-block .confetti,
body.sis-ad-block .sis-footer,
body.sis-ad-block .offcanvas {
    visibility: hidden !important;
}

/* While the splash is active, force the <html> background to black so
   the user sees pure black — not a white flash — while the ad loads. */
html.sis-ad-splash-active {
    background: #000 !important;
}
html.sis-ad-splash-active body {
    background: #000 !important;
    overflow: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   OVERLAY (shared base)
   ═══════════════════════════════════════════════════════════ */
.sis-ad-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;                       /* above EVERYTHING */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.sis-ad-overlay.sis-ad-visible {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP  (≥ 768 px)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sis-ad-overlay {
        padding: 20px;
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .sis-ad-img {
        max-width: 560px;
        max-height: 70vh;
        width: auto;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
        object-fit: contain;
        animation: sis-ad-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .sis-ad-timer-bar {
        display: none;                 /* no timer bar on desktop */
    }
}

@keyframes sis-ad-pop {
    0%   { transform: scale(0.85); opacity: 0; }
    100% { transform: scale(1);    opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  (< 768 px)  — SPLASH SCREEN
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Overlay: solid black, edge-to-edge, no padding, no blur */
    .sis-ad-overlay {
        padding: 0;
        background: #000;
        align-items: stretch;
        justify-content: stretch;

        /* INSTANT appearance — no fade-in. The splash must be the
           very first thing the user sees, zero delay. */
        transition: none !important;
    }

    /* When the image has loaded, show instantly (no transition) */
    .sis-ad-overlay.sis-ad-visible {
        opacity: 1;
        visibility: visible;
        transition: none !important;
    }

    /* Hide the X close button on mobile — auto-close only */
    .sis-ad-close {
        display: none !important;
    }

    /* ═══ IMAGE: always cover 100 % viewport ═══ */
    .sis-ad-img {
        width: 100vw;
        height: 100vh;
        height: 100dvh;               /* dynamic viewport height (notch-safe) */
        object-fit: cover !important; /* ALWAYS cover, never letterbox */
        object-position: center center;
        border-radius: 0;
        display: block;
        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;
        animation: none !important;   /* no pop animation on splash */
    }

    /* ═══ TIMER BAR (bottom of splash) ═══
       A thin bar that shrinks from 100 % → 0 % over the timeout
       duration. Gives the user a visual cue that the ad will close.
       Uses env(safe-area-inset-bottom) so it sits above the home
       indicator on notched iPhones. */
    .sis-ad-timer-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: rgba(255, 255, 255, 0.25);
        z-index: 10;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .sis-ad-timer-bar-fill {
        height: 100%;
        width: 100%;
        background: rgba(255, 255, 255, 0.85);
        transform-origin: left center;
        will-change: transform;
    }

    .sis-ad-timer-bar-fill.sis-ad-timer-anim {
        animation: sis-timer-shrink var(--ad-timeout, 5s) linear forwards;
    }

    @keyframes sis-timer-shrink {
        from { transform: scaleX(1); }
        to   { transform: scaleX(0); }
    }
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO SPLASH FALLBACK (mobile only)
   When no ad is active, the IFFCO logo animation plays inside
   a fullscreen iframe as the splash screen instead.
   ═══════════════════════════════════════════════════════════════════ */
.sis-logo-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #edf2ef;          /* match the logo page background */
    display: none;                /* shown via JS when needed */
}

.sis-logo-splash iframe {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: none;
    display: block;
}

/* Show only on mobile */
@media (max-width: 767.98px) {
    .sis-logo-splash.sis-logo-visible {
        display: block;
    }
}

/* Fade-out before portal appears */
.sis-logo-splash.sis-logo-fadeout {
    animation: sis-logo-fade 0.45s ease forwards;
    pointer-events: none;
}

@keyframes sis-logo-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}
