/* =====================================================================
   JLW native layer — app-like behaviour for the member WebView.
   Loaded after jlw-brand.css in layouts/app.blade.php only.
   ===================================================================== */

/* ---------- Native defaults ---------- */
html, body { overscroll-behavior-y: none; background: var(--bg); }
body { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
input, textarea, select, [contenteditable], .jlw-prose, .jlw-selectable, .jlw-scan-result { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; user-select: none; }
*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }
/* iOS zooms into any field under 16px — the #1 "this is a website" tell */
.form-control:not(.form-control-lg), .form-select:not(.form-select-lg), textarea, .jlw-search input { font-size: max(16px, 1em) !important; }
a, button { -webkit-touch-callout: none; }
:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ---------- Page transitions (opacity + transform, removed when finished) ---------- */
@keyframes jlwEnterFwd { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes jlwEnterBack { from { opacity: 0; transform: translate3d(-28px, 0, 0); } to { opacity: 1; transform: none; } }
.jlw-main.jlw-enter-fwd { animation: jlwEnterFwd .28s cubic-bezier(.2, .8, .2, 1) both; }
.jlw-main.jlw-enter-back { animation: jlwEnterBack .28s cubic-bezier(.2, .8, .2, 1) both; }
html.jlw-navigating .jlw-main { opacity: .55; transition: opacity .15s ease; }

/* Livewire navigation progress bar in brand colours */
#nprogress .bar { background: var(--gold) !important; height: 3px !important; }
#nprogress .peg { box-shadow: 0 0 10px var(--gold), 0 0 5px var(--gold) !important; }

/* ---------- Ripple + press feedback ---------- */
.jlw-ripple-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.jlw-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .14; transform: scale(0); animation: jlwRipple .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.btn .jlw-ripple, .jlw-btn-primary .jlw-ripple { background: #fff; opacity: .28; }
@keyframes jlwRipple { to { transform: scale(1); opacity: 0; } }

.jlw-tile, .jlw-ev-feature, .jlw-prog-mini, .jlw-prog-card, .jlw-person-card, .jlw-album, .jlw-notice-card, .jlw-ev-row,
.jlw-fom, .jlw-quote-card, .jlw-spot, .jlw-cat, .jlw-action, .jlw-bday-person, .jlw-leader-card, .jlw-notif, .btn, .jlw-icon-btn {
    transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease;
}
.jlw-tile:active, .jlw-ev-feature:active, .jlw-prog-mini:active, .jlw-prog-card:active, .jlw-person-card:active, .jlw-album:active,
.jlw-notice-card:active, .jlw-ev-row:active, .jlw-fom:active, .jlw-quote-card:active, .jlw-spot:active, .jlw-action:active,
.jlw-bday-person:active, .jlw-leader-card:active, .jlw-notif:active { transform: scale(.97); }
.btn:active, .jlw-icon-btn:active, .jlw-cat:active { transform: scale(.94); }

/* ---------- Top bar: translucent, elevates on scroll ---------- */
.jlw-topbar { transition: box-shadow .25s ease, background-color .25s ease; }
.jlw-topbar.is-scrolled { background: rgba(245, 245, 247, .82) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: 0 1px 0 rgba(17, 17, 20, .06), 0 6px 18px rgba(17, 17, 20, .06); }

/* ---------- Bottom navigation: animated pill + icon bounce ---------- */
.jlw-bottomnav { background: rgba(255, 255, 255, .92) !important; -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); }
.jlw-nav-link .ico { position: relative; transition: background-color .25s ease, color .25s ease; }
.jlw-nav-link.active .ico { animation: jlwPill .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.jlw-nav-link.active .ico i { animation: jlwIconPop .4s cubic-bezier(.2, .9, .3, 1.4) both; display: inline-block; }
@keyframes jlwPill { from { transform: scaleX(.4); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes jlwIconPop { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.jlw-nav-link { transition: color .2s ease; }

/* ---------- Side menu: items glide in ---------- */
.offcanvas.show .list-group-item { animation: jlwSlideIn .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes jlwSlideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.offcanvas.show .list-group-item:nth-child(1) { animation-delay: .02s; } .offcanvas.show .list-group-item:nth-child(2) { animation-delay: .04s; }
.offcanvas.show .list-group-item:nth-child(3) { animation-delay: .06s; } .offcanvas.show .list-group-item:nth-child(4) { animation-delay: .08s; }
.offcanvas.show .list-group-item:nth-child(5) { animation-delay: .10s; } .offcanvas.show .list-group-item:nth-child(6) { animation-delay: .12s; }
.offcanvas.show .list-group-item:nth-child(7) { animation-delay: .14s; } .offcanvas.show .list-group-item:nth-child(8) { animation-delay: .16s; }
.offcanvas.show .list-group-item:nth-child(9) { animation-delay: .18s; } .offcanvas.show .list-group-item:nth-child(10) { animation-delay: .20s; }
.offcanvas.show .list-group-item:nth-child(n+11) { animation-delay: .22s; }
.offcanvas { border-radius: 0 24px 24px 0; }
.offcanvas-backdrop.show { opacity: .4; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ---------- Pull to refresh ---------- */
.jlw-ptr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; transform: translate(-50%, -60px); z-index: 1200; opacity: 0;
    width: 42px; height: 42px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(17, 17, 20, .18); display: flex; align-items: center; justify-content: center;
    transition: opacity .2s ease; pointer-events: none; }
.jlw-ptr-spin { color: var(--accent); font-size: 1.15rem; display: flex; transition: transform .2s ease; }
.jlw-ptr.is-ready .jlw-ptr-spin { transform: rotate(180deg); color: var(--gold-600); }
.jlw-ptr.is-loading { opacity: 1 !important; transition: transform .25s ease, opacity .2s ease; }
.jlw-ptr.is-loading .jlw-ptr-spin i::before { content: ""; }
.jlw-ptr.is-loading .jlw-ptr-spin { width: 20px; height: 20px; border: 2.5px solid var(--accent-100); border-top-color: var(--accent); border-radius: 50%; animation: jlwSpin .7s linear infinite; }
@keyframes jlwSpin { to { transform: rotate(360deg); } }

/* ---------- Edge swipe back indicator ---------- */
.jlw-edge-back { position: fixed; left: 0; top: 50%; transform: translate(-40px, -50%); z-index: 1200; opacity: 0; width: 40px; height: 40px; border-radius: 50%;
    background: #fff; box-shadow: 0 6px 18px rgba(17, 17, 20, .18); display: flex; align-items: center; justify-content: center; color: var(--muted);
    transition: opacity .15s ease, background-color .15s ease, color .15s ease; pointer-events: none; }
.jlw-edge-back.is-ready { background: var(--accent); color: #fff; }

/* ---------- Snackbar toasts (bottom, above the tab bar) ---------- */
#jlwToastStack { position: fixed !important; top: auto !important; right: auto !important; left: 50% !important; transform: translateX(-50%);
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; width: min(92vw, 460px); z-index: 3000 !important; display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
#jlwToastStack .jlw-toast { animation: jlwSnackIn .32s cubic-bezier(.2, .9, .3, 1.2) both; border-radius: 16px; background: rgba(28, 28, 32, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@keyframes jlwSnackIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Reveal on scroll ---------- */
.jlw-reveal { opacity: 0; transform: translate3d(0, 22px, 0); }
.jlw-reveal.is-in { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1); }

/* ---------- Living details ---------- */
@keyframes jlwFloatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes jlwShine { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes jlwBadgePulse { 0% { box-shadow: 0 0 0 0 rgba(215, 38, 46, .55); } 70% { box-shadow: 0 0 0 8px rgba(215, 38, 46, 0); } 100% { box-shadow: 0 0 0 0 rgba(215, 38, 46, 0); } }
.jlw-bell-badge { animation: jlwBadgePulse 2s ease-out infinite; }
.jlw-ticket { overflow: hidden; }
.jlw-ticket-main::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent); animation: jlwShine 3.5s ease-in-out 1s infinite; pointer-events: none; }
.jlw-greet-avatar { animation: jlwFloatY 4s ease-in-out infinite; }
.jlw-countdown strong { font-variant-numeric: tabular-nums; }
.jlw-bday-strip .jlw-confetti-emoji { display: inline-block; animation: jlwWiggle 2.4s ease-in-out infinite; }
@keyframes jlwWiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
.jlw-carousel .carousel-item.active .jlw-cap .t { animation: jlwCapIn .6s cubic-bezier(.2, .8, .2, 1) .15s both; }
.jlw-carousel .carousel-item.active .jlw-cap .s { animation: jlwCapIn .6s cubic-bezier(.2, .8, .2, 1) .28s both; }
@keyframes jlwCapIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jlw-carousel .carousel-item.active .jlw-media-img { animation: jlwKenBurns 7s ease-out both; }
@keyframes jlwKenBurns { from { transform: scale(1.08); } to { transform: scale(1); } }

/* ---------- Splash ---------- */
#jlwSplash { background: radial-gradient(circle at 50% 40%, #3438A8 0%, #2E3192 45%, #1F2170 100%) !important; color: #fff; }
#jlwSplash .jlw-splash-logo { width: 112px; height: 112px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3); animation: jlwSplashLogo .7s cubic-bezier(.2, .9, .3, 1.3) both; }
#jlwSplash .jlw-splash-logo img { width: 86px; height: 86px; object-fit: contain; }
#jlwSplash .jlw-splash-logo::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(245, 166, 35, .9); animation: jlwRing 1.4s ease-out .3s infinite; }
#jlwSplash .splash-title { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin-top: 20px; animation: jlwCapIn .5s ease .25s both; }
#jlwSplash .splash-sub { font-weight: 800; font-size: .66rem; letter-spacing: .3em; color: var(--gold); margin-top: 4px; animation: jlwCapIn .5s ease .35s both; }
#jlwSplash .splash-bar { width: 120px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .15); margin-top: 22px; overflow: hidden; }
#jlwSplash .splash-bar span { display: block; height: 100%; width: 40%; background: var(--gold); border-radius: 3px; animation: jlwBar 1s ease-in-out infinite; }
@keyframes jlwSplashLogo { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes jlwRing { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes jlwBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .jlw-reveal { opacity: 1; transform: none; }
}