/* Prisma Jellyfin Notice — configurable CSS-only animated announcement banner */
/* Disclaimer: Assisted by AI (｡>﹏<) */
/* Based on: https://forum.jellyfin.org/t-help-with-custom-css-for-an-announcement-message-to-be-displayed-in-top-banner */
.skinHeader {
    /* timings */
    --notice-expand-duration: 0.15s;
    --notice-hold-duration: 2s;
    --notice-fade-duration: 0.35s;

    /* text and content */
    --notice-text-content: "NOTICE: This is your Notice Text. Thank You For Noticing.";
    --notice-text: #000;

    /* visual / sizing */
    --notice-bg: linear-gradient(90deg, var(--primary-accent-color), var(--primary-alt3));
    --notice-padding: 12px 16px;
    --notice-radius: var(--rounded-cards);
    --notice-z: 9999;

    /* progress bar */
    --progress-height: 10px;
    --progress-width-vw: 90vw;
    --progress-color: var(--primary-accent-color);
    --progress-track: rgba(255,255,255,0.10);

    /* overall stacking/position tweaks */
    --notice-top: 50%;
}

/* NOTICE box (no internal progress layer) */
.skinHeader::after {
    content: var(--notice-text-content);
    position: fixed;
    left: 50%;
    top: var(--notice-top);
    transform: translate(-50%, -50%) scaleX(0);
    transform-origin: center;
    width: 100vw;
    box-sizing: border-box;
    padding: var(--notice-padding);
    text-align: center;
    font-weight: 700;
    color: var(--notice-text);
    background: var(--notice-bg);
    border-radius: var(--notice-radius);
    z-index: var(--notice-z);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    backdrop-filter: blur(var(--blur));
    pointer-events: none;
    overflow: visible;

    /* two separate animations:
       - scale runs only during expand
       - opacity (fade) runs later after hold
    */
    animation:
      noticeScale var(--notice-expand-duration) ease-out forwards,
      noticeFade var(--notice-fade-duration) linear forwards;
    /* delay the fade until expand + hold finish */
    animation-delay: 0s, calc(var(--notice-expand-duration) + var(--notice-hold-duration));
}

/* Progress bar container + fill as a single ::before element */
/* It will fill during the hold period and fade when notice fades. */
.skinHeader::before {
    content: "";
    position: fixed;
    left: 50%;
    top: calc(var(--notice-top) + 42px); /* 42px places bar just below the notice: ADJUST IF YOU CHANGE PADDING */
    transform: translateX(-50%);
    width: var(--progress-width-vw);
    max-width: 100%;
    height: var(--progress-height);
    border-radius: 999px;
    z-index: calc(var(--notice-z) + 1);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35) inset;

    /* two-layer background: track + fill (fill starts at 0%) */
    background-image:
      linear-gradient(90deg, var(--progress-track) 0%, var(--progress-track) 100%),
      linear-gradient(90deg, var(--progress-color) 0%, var(--primary-alt3) 100%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, 0% 100%;
    background-position: center, left;

    /* progressFill runs during the hold period (starts after expand).
       progressFade runs during fade period so the bar disappears with the notice.
    */
    animation:
      progressFill var(--notice-hold-duration) linear forwards,
      progressFade var(--notice-fade-duration) linear forwards;
    animation-delay: var(--notice-expand-duration), calc(var(--notice-expand-duration) + var(--notice-hold-duration));
}

/* scale the notice from center */
@keyframes noticeScale {
    from { transform: translate(-50%, -50%) scaleX(0); }
    to   { transform: translate(-50%, -50%) scaleX(1); }
}

/* fade notice out during fade-duration */
@keyframes noticeFade {
    from { opacity: 1; }
    to   { opacity: 0; transform: translate(-50%, -50%) scaleX(1.02); }
}

/* fill the progress bar during the hold period */
@keyframes progressFill {
    from { background-size: 100% 100%, 0% 100%; opacity: 1; }
    to   { background-size: 100% 100%, 100% 100%; opacity: 1; }
}

/* fade out the progress bar in sync with the notice fade */
@keyframes progressFade {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(6px); }
}

/* responsive tweaks */
@media (max-width: 600px) {
    .skinHeader::after { font-size: 0.95rem; padding: 10px 8px; }
    .skinHeader::before { width: 95vw; height: calc(var(--progress-height) - 3px); top: calc(var(--notice-top) + 38px); }
}