/* ============================================================
   Paradise Food — scroll-collapsible intro video banner
   (paired with public/themes/default/js/intro-scroll.js)
   ============================================================ */

/* --- fullscreen intro phase (video detached from the SPA tree) --- */
#psdIntroBanner{
    position:fixed; left:0; top:0;
    width:100%; height:100vh; height:100dvh;
    object-fit:cover; z-index:800;
    will-change:height, border-radius;
    backface-visibility:hidden;
    background:#000;
}

/* --- shrinking phase: fullscreen -> rounded banner --- */
#psdIntroBanner.is-banner{
    height:240px !important;
    border-bottom-left-radius:26px;
    border-bottom-right-radius:26px;
    box-shadow:0 18px 44px rgba(0,0,0,.45);
    transition:height .68s cubic-bezier(.22,.61,.36,1),
               border-radius .68s cubic-bezier(.22,.61,.36,1),
               box-shadow .68s cubic-bezier(.22,.61,.36,1);
    animation:psdBannerIn .68s cubic-bezier(.22,.61,.36,1);
}

/* --- home flow phase: banner scrolls away with the page --- */
#psdIntroBanner.is-inflow{
    position:relative;
    display:block;
    width:calc(100% - 24px);
    height:240px;
    margin:12px 12px 14px;
    border-radius:26px;
    box-shadow:0 14px 34px rgba(0,0,0,.35);
    background:#0d0f16;
    z-index:auto;
}
#psdIntroBanner.is-inflow:active{ cursor:pointer }

/* content makes room while the banner is fixed mid-transition */
body.psd-banner-going .ff-scope,
body.psd-banner-shrunk .ff-scope{
    padding-top:264px;
    transition:padding-top .68s cubic-bezier(.22,.61,.36,1);
}

/* fade support for route watching */
#psdIntroBanner.psd-banner-hide{ opacity:0; transition:opacity .3s ease }

/* --- swipe hint on the intro screen --- */
.psd-swipe-hint{
    position:fixed;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    display:flex; flex-direction:column; align-items:center; gap:.5rem;
    color:#fff; pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
}
.psd-swipe-hint.is-out{ opacity:0; transform:translateX(-50%) translateY(10px) }
.psd-swipe-hint em{
    font-style:normal; font-size:.82rem; letter-spacing:.02em;
    color:rgba(255,255,255,.9);
    background:rgba(0,0,0,.35);
    padding:.35rem .9rem; border-radius:999px;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.psd-swipe-track{ display:block; width:26px; height:40px; opacity:.95 }
.psd-swipe-track i{
    display:block; width:8px; height:8px; border-radius:50%;
    background:#fff; margin:0 auto;
    box-shadow:0 0 0 2px rgba(255,255,255,.25) inset;
    animation:psdSwipeArrow 1.5s ease-in-out infinite;
}
@keyframes psdSwipeArrow{
    0%   { transform:translateY(6px); opacity:0 }
    35%  { transform:translateY(14px); opacity:1 }
    100% { transform:translateY(28px); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
    #psdIntroBanner.is-banner,
    body.psd-banner-going .ff-scope,
    body.psd-banner-shrunk .ff-scope{ transition:none; animation:none }
    .psd-swipe-track i{ animation:none }
}