/* ===========================================================
   Demo Notice Marquee — Dog Walking Fields
   File: public/assets/front/css/demo-notice.css
   =========================================================== */
.demo-notice{
    --dn-plum:#5b2f43;
    --dn-plum-2:#43202f;
    --dn-green:#5fae73;
    --dn-green-100:#d6f0dd;

    position:relative;
    z-index:5;
    overflow:hidden;
    color:#fff;
    font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    background:
        radial-gradient(70% 220% at 100% 50%, rgba(95,174,115,.26) 0%, rgba(95,174,115,0) 62%),
        linear-gradient(135deg, var(--dn-plum) 0%, var(--dn-plum-2) 100%);
    border-top:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
    box-shadow:0 16px 34px -26px rgba(43,20,31,.9);
}
.demo-notice *{box-sizing:border-box;}

.demo-notice-inner{
    display:flex;align-items:stretch;
    min-height:46px;
}

/* left "DEMO" tag */
.demo-notice-badge{
    position:relative;z-index:4;flex:none;
    display:inline-flex;align-items:center;gap:8px;
    padding:0 30px 0 18px;
    background:var(--dn-green);
    color:#0f2417;
    font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
    clip-path:polygon(0 0,100% 0,calc(100% - 15px) 100%,0 100%);
}
.demo-notice-badge i{font-size:.9rem;}

/* scrolling area */
.demo-marquee{
    flex:1;min-width:0;overflow:hidden;
    display:flex;align-items:center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 46px,#000 calc(100% - 46px),transparent 100%);
}
.demo-marquee-track{
    display:flex;width:max-content;
    animation:demo-marquee-scroll 30s linear infinite;
    will-change:transform;
}
.demo-notice:hover .demo-marquee-track{animation-play-state:paused;}

.demo-marquee-group{display:flex;align-items:center;flex:none;}

.demo-marquee-item{
    display:inline-flex;align-items:center;gap:9px;
    padding:0 22px;white-space:nowrap;
    font-size:.88rem;font-weight:500;letter-spacing:.01em;
    color:rgba(255,255,255,.90);
}
.demo-marquee-item > i{color:var(--dn-green-100);font-size:.85rem;}
.demo-marquee-item strong{font-weight:700;color:#fff;}
.demo-marquee-item a{
    color:#fff;font-weight:700;text-decoration:none;
    border-bottom:1px dashed rgba(255,255,255,.55);
    transition:color .2s ease,border-color .2s ease;
}
.demo-marquee-item a:hover,
.demo-marquee-item a:focus{color:var(--dn-green-100);border-bottom-color:var(--dn-green-100);}

.demo-marquee-dot{
    flex:none;width:5px;height:5px;border-radius:50%;
    background:rgba(255,255,255,.32);
}

@keyframes demo-marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}

/* responsive */
@media (max-width:767.98px){
    .demo-notice-inner{min-height:42px;}
    .demo-notice-badge{padding:0 24px 0 14px;font-size:.64rem;letter-spacing:.12em;}
    .demo-notice-badge span{display:none;}   /* sirf icon */
    .demo-marquee-item{font-size:.8rem;padding:0 16px;}
    .demo-marquee-track{animation-duration:22s;}
}

/* accessibility */
@media (prefers-reduced-motion:reduce){
    .demo-marquee-track{animation:none;}
    .demo-marquee{overflow-x:auto;}
    .demo-marquee-group:nth-child(2){display:none;}
}