/* ═══════════════════════════════════════════════════════
   SELMCORP — FLYERS PAGE
   Full-viewport horizontal scroll gallery
   ═══════════════════════════════════════════════════════ */

/* Override body for full-screen experience */
.flyers-page{overflow:hidden;height:100vh;background:var(--bg)}
.flyers-page #particles{opacity:.4}

/* ═══ TOPBAR ═══ */
.fl-topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,3vw,2.5rem);background:rgba(6,6,15,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(192,132,252,.08)}
.fl-topbar__left{display:flex;align-items:center;gap:1.2rem}
.fl-back{display:flex;align-items:center;gap:.5rem;color:var(--txt3);font-size:.82rem;font-weight:600;text-decoration:none;transition:color .3s var(--ease);white-space:nowrap}
.fl-back:hover{color:var(--primary)}
.fl-back i{font-size:.75rem}
.fl-topbar__divider{width:1px;height:24px;background:var(--border)}
.fl-topbar__title{display:flex;flex-direction:column;gap:.1rem}
.fl-topbar__title h1{font-family:'Syne',sans-serif;font-size:1.1rem;font-weight:700;line-height:1}
.fl-topbar__right{display:flex;align-items:center;gap:.8rem}
.fl-count{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--txt3);min-width:40px;text-align:center}
.fl-count span{color:var(--accent);font-weight:700}
.fl-nav-btns{display:flex;gap:.4rem}
.fl-nav-btn{width:36px;height:36px;background:var(--card);border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt2);font-size:.8rem;transition:all .3s var(--ease)}
.fl-nav-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}
.fl-nav-btn:disabled{opacity:.3;cursor:not-allowed}

/* ═══ STAGE ═══ */
.fl-stage{position:fixed;top:72px;left:0;right:0;bottom:36px;overflow:hidden;cursor:grab}
.fl-stage:active{cursor:grabbing}

/* ═══ TRACK — horizontal flex ═══ */
.fl-track{display:flex;align-items:center;gap:clamp(2rem,4vw,4rem);height:100%;padding:2rem clamp(2rem,5vw,6rem);transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform}

/* ═══ FLYER ITEMS ═══ */
.fl-item{flex:0 0 auto;height:100%;max-height:calc(100vh - 160px);display:flex;flex-direction:column;gap:1.2rem;align-items:center;transition:all .5s cubic-bezier(.4,0,.2,1)}
.fl-item--active{transform:scale(1.02)}
.fl-item--inactive{transform:scale(.94);opacity:.55;filter:blur(1px)}

.fl-item__frame{flex:1;min-height:0;aspect-ratio:3/4;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.fl-item--active .fl-item__frame{box-shadow:0 30px 80px rgba(108,43,217,.2),0 0 0 1px rgba(192,132,252,.15)}
.fl-item__frame img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}

/* placeholder */
.fl-item__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;text-align:center;padding:2rem}
.fl-item__ph i{font-size:3rem;color:var(--accent);opacity:.15}
.fl-item__ph span{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;color:var(--txt2)}
.fl-item__ph small{font-size:.72rem;color:var(--txt3);max-width:180px;line-height:1.4}

/* label under frame */
.fl-item__label{text-align:center;width:100%;max-width:300px;transition:opacity .4s var(--ease)}
.fl-item--inactive .fl-item__label{opacity:0}
.fl-item__tag{display:inline-block;padding:.2rem .7rem;background:rgba(108,43,217,.1);border:1px solid rgba(108,43,217,.2);border-radius:var(--r-pill);font-size:.7rem;font-weight:700;color:var(--primary);letter-spacing:.5px;margin-bottom:.4rem}
.fl-item__title{font-family:'Syne',sans-serif;font-size:1rem;font-weight:700;margin-bottom:.2rem}
.fl-item__desc{font-size:.8rem;color:var(--txt3)}

/* ═══ CTA CARD ═══ */
.fl-item__frame--cta{background:linear-gradient(135deg,rgba(108,43,217,.08),rgba(192,132,252,.05));border-style:dashed;display:flex;align-items:center;justify-content:center}
.fl-cta__content{text-align:center;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.fl-cta__icon{width:60px;height:60px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin:0 auto}
.fl-cta__content h3{font-family:'Syne',sans-serif;font-size:1.3rem;font-weight:800}
.fl-cta__content p{font-size:.88rem;color:var(--txt2);line-height:1.5;max-width:220px}
.fl-cta__link{font-size:.78rem;color:var(--accent);text-decoration:none;font-weight:600;margin-top:.3rem}
.fl-cta__link:hover{text-decoration:underline}

/* ═══ HINT ═══ */
.fl-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;color:var(--txt3);font-size:.78rem;animation:flHint 2s ease-in-out 1.5s forwards;opacity:0}
@keyframes flHint{0%{opacity:0;transform:translateX(-50%) translateY(4px)}40%{opacity:.7}80%{opacity:.5}100%{opacity:0;transform:translateX(-50%) translateY(0)}}
.fl-hint__arrow{animation:flHintArrow 1.2s ease-in-out infinite}
@keyframes flHintArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ═══ PROGRESS BAR AT BOTTOM ═══ */
.fl-progress{position:fixed;bottom:0;left:0;right:0;height:4px;background:var(--border);z-index:100}
.fl-progress__fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent),var(--cyan));transition:width .4s cubic-bezier(.4,0,.2,1);width:0}

/* Nav hidden on flyers page (replaced by topbar) */
.flyers-page .nav{display:none}

/* ═══ MOBILE ═══ */
@media(max-width:768px){
  .fl-topbar{height:64px;padding:0 1rem}
  .fl-topbar__title .stag{display:none}
  .fl-topbar__title h1{font-size:.95rem}
  .fl-stage{top:64px}
  .fl-track{gap:1.5rem;padding:1.5rem 1.5rem}
  .fl-nav-btns{display:none}
  .fl-count{display:none}
}
@media(max-width:480px){
  .fl-topbar__left .fl-back span{display:none}
}