/* FA shared design and motion system */
:root {
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-exit: cubic-bezier(.55,0,1,.45);
  --ease-ui: cubic-bezier(.4,0,.2,1);
  --ease-decel: cubic-bezier(0,0,.2,1);
  --ease-gesture: cubic-bezier(.16,1,.3,1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 380ms;
  --dur-xslow: 600ms;
  --fa-gold: #c9a84c;
  --fa-blue: #1761f0;
}
html { scroll-behavior: smooth; }
body { font-family: 'Outfit',var(--ff,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif); }
button,a,input,textarea,select { -webkit-tap-highlight-color: transparent; }
button,a,[role=button] { touch-action: manipulation; }
button:active,.btn:active,[role=button]:active { transform: scale(.96); transition-duration: var(--dur-instant)!important; }
:focus-visible { outline: 2px solid var(--accent,var(--fa-blue)); outline-offset: 3px; }

@keyframes fa-in-up { from { opacity:0;transform:translateY(16px) scale(.98);filter:blur(2px) } to { opacity:1;transform:none;filter:none } }
@keyframes fa-in-left { from { opacity:0;transform:translateX(-16px) } to { opacity:1;transform:none } }
@keyframes fa-pulse { 50% { opacity:.48 } }
@keyframes fa-shimmer { to { transform:translateX(200%) } }
@keyframes fa-heart-beat { 15%{transform:scale(.82)}45%{transform:scale(1.3) rotate(-8deg)}68%{transform:scale(.94)}82%{transform:scale(1.08)} }
@keyframes fa-bookmark-pin { 30%{transform:scale(.8) rotate(-15deg)}55%{transform:scale(1.15) rotate(5deg)}75%{transform:scale(.95) rotate(-3deg)} }
@keyframes fa-badge-pop { 0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)} }
@keyframes fa-word-in { from{opacity:0;transform:translateY(24px) rotate(2deg);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }
@keyframes fa-confetti-fall { 0%{opacity:0;transform:translate3d(0,-16px,0) rotate(0)}12%{opacity:1}100%{opacity:0;transform:translate3d(var(--x),105vh,0) rotate(var(--r))} }
@keyframes fa-toast-in { from{opacity:0;transform:translateY(10px) scale(.97);filter:blur(5px)} to{opacity:1;transform:none;filter:none} }

.fa-reveal { opacity:0;transform:translateY(16px); }
.fa-reveal.is-revealed { animation:fa-in-up var(--dur-slow) var(--ease-decel) both; }
.skel,.skeleton { position:relative;overflow:hidden; }
.skel::after,.skeleton::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);animation:fa-shimmer 1.4s linear infinite; }
.pa-like.popping svg,.story-like.is-on svg { animation:fa-heart-beat 380ms var(--ease-spring) both; }
.pa-save.popping svg,.pa-save.is-on svg { animation:fa-bookmark-pin 360ms var(--ease-spring) both; }
.notif-badge:not(:empty),.badge:not(:empty) { animation:fa-badge-pop 320ms var(--ease-spring) both; }
.left-rail { animation:fa-in-left var(--dur-slow) var(--ease-spring) 100ms both; }
.feed-tabs { position:relative;isolation:isolate; }
.feed-tabs .tab { position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color var(--dur-fast) var(--ease-ui); }
.feed-tabs .tabs-indicator { position:absolute;inset:3px auto 3px 0;z-index:0;border-radius:999px;background:linear-gradient(135deg,var(--accent,var(--fa-gold)),color-mix(in srgb,var(--accent,var(--fa-gold)) 72%,#fff));box-shadow:0 7px 18px color-mix(in srgb,var(--accent,var(--fa-gold)) 22%,transparent);pointer-events:none;transition:width var(--dur-med) var(--ease-spring),transform var(--dur-med) var(--ease-spring); }
.feed-tabs .tab.is-active,.feed-tabs .tab[aria-selected=true] { color:#0b0b09!important; }
.post-card,.feature-card,.profile-hero,.account-card,.card { transition:border-color var(--dur-fast) var(--ease-ui),background var(--dur-fast) var(--ease-ui),box-shadow var(--dur-fast) var(--ease-ui),transform var(--dur-med) var(--ease-spring); }
.post-card:hover,.feature-card:hover { border-color:color-mix(in srgb,var(--accent,var(--fa-gold)) 44%,transparent); }
.post-card:hover .av42-sq,.post-card:hover .av42 { box-shadow:0 0 0 2.5px color-mix(in srgb,var(--accent,var(--fa-gold)) 28%,transparent);transform:scale(1.04); }
.post-media { overflow:hidden; }
.post-media img { transition:transform 400ms var(--ease-spring); }
.post-card:hover .post-media img { transform:scale(1.03); }
.fake-composer:hover { box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,var(--fa-gold)) 12%,transparent); }
.fake-input::after { content:'|';margin-left:2px;color:var(--accent,var(--fa-gold));opacity:0;animation:fa-pulse 1s step-end infinite; }
.fake-composer:hover .fake-input::after { opacity:1; }
.sheet { transition:transform var(--dur-med) var(--ease-spring),opacity var(--dur-fast) var(--ease-ui); }
.sheet-handle { height:28px;display:none;align-items:center;justify-content:center;flex:none;touch-action:none; }
.sheet-handle::before { content:'';width:38px;height:4px;border-radius:99px;background:var(--line-strong,rgba(128,128,128,.35)); }
.toast:not(.leaving) { overflow:hidden;animation:fa-toast-in var(--dur-med) var(--ease-spring) both!important; }
.toast::after { content:'';position:absolute;inset:auto 0 0;height:2px;background:var(--accent,var(--fa-gold));transform-origin:left;animation:fa-toast-progress 4s linear both; }
.toast.fa-merit-toast { border-color:color-mix(in srgb,var(--fa-gold) 58%,transparent)!important;background-image:radial-gradient(circle at 10% 0,rgba(201,168,76,.22),transparent 50%);box-shadow:0 18px 60px rgba(201,168,76,.2)!important; }
.toast.fa-merit-toast::after { height:3px;background:linear-gradient(90deg,var(--fa-gold),#f3dc8b); }
@keyframes fa-toast-progress { to { transform:scaleX(0) } }
.fa-confetti { position:fixed;inset:0;z-index:2147483500;overflow:hidden;pointer-events:none; }
.fa-confetti i { position:absolute;top:-18px;left:var(--left);width:7px;height:13px;border-radius:2px;background:var(--color);animation:fa-confetti-fall var(--time) var(--ease-decel) var(--delay) both; }
.fa-like-particles { position:fixed;z-index:2147483600;width:1px;height:1px;pointer-events:none; }
.fa-like-particles i { position:absolute;width:5px;height:5px;border-radius:50%;background:#ff355e;box-shadow:0 0 8px rgba(255,53,94,.6);animation:fa-like-particle 600ms var(--ease-decel) both; }
.fa-like-particles i:nth-child(2n) { background:#ff829b; }
@keyframes fa-like-particle { from{opacity:1;transform:translate(-50%,-50%) rotate(var(--a)) translateX(0) scale(1)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(0)} }
.empty-card,.empty-state { animation:fa-in-up var(--dur-slow) var(--ease-spring) both; }
.empty-icon { animation:fa-badge-pop 480ms var(--ease-spring) both; }

body[data-fa-page=index] header { transition:transform var(--dur-med) var(--ease-gesture),background var(--dur-fast); }
body[data-fa-page=index],body[data-fa-page=account],body[data-fa-page=profile],body[data-fa-page=post],body[data-fa-page=login],body[data-fa-page=signup] { --accent:var(--fa-blue);--accent-hover:#0f52d0; }
[data-theme=dark] body[data-fa-page=index],[data-theme=dark] body[data-fa-page=account],[data-theme=dark] body[data-fa-page=profile],[data-theme=dark] body[data-fa-page=post],[data-theme=dark] body[data-fa-page=login],[data-theme=dark] body[data-fa-page=signup] { --accent:var(--fa-gold);--accent-hover:#dec36d;--accent-2:#d8bd67;--accent-soft:rgba(201,168,76,.12);--accent-glow:rgba(201,168,76,.24);--border-focus:var(--fa-gold); }
body[data-fa-page=index] header {
  display:grid;
  grid-template-columns:minmax(150px,auto) minmax(0,1fr) minmax(150px,auto);
  column-gap:clamp(16px,2vw,28px);
}
body[data-fa-page=index] .desktop-nav {
  position:static;
  left:auto;
  transform:none;
  justify-self:center;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
body[data-fa-page=index] .desktop-nav ul { gap:clamp(14px,1.65vw,28px); }
body[data-fa-page=index] .header-actions {
  justify-self:end;
  width:auto;
  max-width:100%;
}
body[data-fa-page=index] header.fa-header-hidden { transform:translateY(-110%); }
body[data-fa-page=index] .hero-bg { will-change:transform;transition:transform 500ms var(--ease-gesture); }
body[data-fa-page=index] .hero-content { animation:fa-in-up var(--dur-xslow) var(--ease-spring) both; }
body[data-fa-page=index] .hero h1 .fa-hero-word { display:inline-block;margin-right:.18em;opacity:0;animation:fa-word-in 650ms var(--ease-spring) calc(var(--word-index) * 90ms + 120ms) both; }
body[data-fa-page=index] .hero h1::after { content:'';display:block;width:min(220px,48%);height:3px;margin:18px auto 0;border-radius:99px;background:linear-gradient(90deg,transparent,var(--fa-gold),transparent);transform-origin:center;animation:fa-underline 900ms var(--ease-spring) 300ms both; }
@keyframes fa-underline { from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)} }
body[data-fa-page=index] .feature-card { border-radius:20px!important; }
body[data-fa-page=index] .stats-strip { border-block:1px solid color-mix(in srgb,var(--accent) 14%,transparent); }
body[data-fa-page=index] .status-pill::before { content:'';position:absolute;inset:-3px;border:1px solid color-mix(in srgb,var(--fa-gold) 50%,transparent);border-radius:inherit;animation:fa-pulse 2s infinite;pointer-events:none; }
body[data-fa-page=login] .login-card,body[data-fa-page=signup] .signup-card { animation:fa-in-up var(--dur-slow) var(--ease-spring) both; }
[data-theme=dark] body[data-fa-page=login] .login-card,[data-theme=dark] body[data-fa-page=signup] .signup-card { box-shadow:0 0 0 1px rgba(201,168,76,.26),0 28px 80px rgba(0,0,0,.4); }
body[data-fa-page=login] .field,body[data-fa-page=signup] .field { position:relative; }
body[data-fa-page=login] .field > label,body[data-fa-page=signup] .field > label { position:absolute;left:10px;top:13px;z-index:3;margin:0;padding:0 5px;background:var(--surface,var(--card-bg,#fff));color:var(--text-3,var(--ink-3));pointer-events:none;transform-origin:left;transition:color var(--dur-fast),transform var(--dur-med) var(--ease-spring),top var(--dur-med) var(--ease-spring); }
body[data-fa-page=login] .field.fa-float > label,body[data-fa-page=login] .field:focus-within > label,body[data-fa-page=login] .field:has(input:not(:placeholder-shown)) > label,body[data-fa-page=signup] .field.fa-float > label,body[data-fa-page=signup] .field:focus-within > label,body[data-fa-page=signup] .field:has(input:not(:placeholder-shown)) > label { top:-7px;color:var(--accent);transform:scale(.86); }
body[data-fa-page=login] .field .input-wrap input::placeholder,body[data-fa-page=signup] .field .input-wrap input::placeholder { opacity:0;transition:opacity var(--dur-fast); }
body[data-fa-page=login] .field:focus-within .input-wrap input::placeholder,body[data-fa-page=signup] .field:focus-within .input-wrap input::placeholder { opacity:.72; }
body[data-fa-page=login] .btn-oauth-social,body[data-fa-page=signup] .btn-oauth-social { transition:transform var(--dur-med) var(--ease-spring),border-color var(--dur-fast),box-shadow var(--dur-fast),background var(--dur-fast); }
body[data-fa-page=login] .btn-oauth-social:hover,body[data-fa-page=signup] .btn-oauth-social:hover { transform:translateY(-2px) scale(1.02);border-color:color-mix(in srgb,var(--accent) 42%,transparent);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 13%,transparent); }
body[data-fa-page=account] .rank-card,body[data-fa-page=account] .merit-rank-card,body[data-fa-page=profile] .profile-hero { background-image:radial-gradient(circle at 85% 0,color-mix(in srgb,var(--fa-gold) 20%,transparent),transparent 42%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent); }
body[data-fa-page=account] .rank-progress-bar,body[data-fa-page=account] .merit-progress-track { overflow:visible; }
body[data-fa-page=account] .rank-progress-fill,body[data-fa-page=account] .merit-progress-bar { position:relative; }
body[data-fa-page=account] .rank-progress-fill::after,body[data-fa-page=account] .merit-progress-bar::after { content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;border:2px solid var(--surface,#fff);border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);transform:translateY(-50%); }
body[data-fa-page=account] .tab-pane.active { animation:fa-in-up var(--dur-med) var(--ease-decel) both; }
body[data-fa-page=profile] .profile-hero,body[data-fa-page=post] .post-card { box-shadow:0 18px 60px color-mix(in srgb,var(--accent) 7%,transparent); }

.fa-gesture-hint { position:fixed;left:50%;bottom:calc(82px + env(safe-area-inset-bottom));z-index:2147483000;max-width:calc(100vw - 32px);padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(10,10,9,.72);color:#fff;box-shadow:0 8px 32px rgba(0,0,0,.32);backdrop-filter:blur(18px);font:700 11px/1.2 'Outfit',sans-serif;transform:translate(-50%,12px);opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-med) var(--ease-spring); }
.fa-gesture-hint.show { opacity:1;transform:translate(-50%,0); }
.fa-ripple { position:absolute;border-radius:50%;background:currentColor;opacity:.1;pointer-events:none;transform:scale(0);animation:fa-ripple 440ms var(--ease-decel) forwards; }
@keyframes fa-ripple { to { transform:scale(2);opacity:0 } }

@media (max-width:720px) {
  .sheet-handle { display:flex; }
  .backdrop.show .sheet { border-radius:22px 22px 0 0; }
  .mobile-bottom-nav { padding-bottom:env(safe-area-inset-bottom); }
}
@media (min-width:861px) and (max-width:1120px) {
  body[data-fa-page=index] header {
    display:flex!important;
    justify-content:space-between;
    align-items:center;
    min-height:64px;
    gap:14px;
    padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));
  }
  body[data-fa-page=index] .desktop-nav,
  body[data-fa-page=index] .status-pill { display:none!important; }
  body[data-fa-page=index] .header-actions {
    margin-left:auto;
    flex:0 0 auto;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
  }
  body[data-fa-page=index] #auth-container {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
  }
  body[data-fa-page=index] .mobile-menu-btn {
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:999px;
    flex:0 0 42px;
    color:var(--text-primary);
  }
}
@media (max-width:860px) {
  body[data-fa-page=index] header {
    display:flex!important;
    justify-content:space-between;
    align-items:center;
    min-height:64px;
    gap:12px;
    padding:10px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
  }
  body[data-fa-page=index] .brand-link { flex:0 0 auto;min-width:42px; }
  body[data-fa-page=index] .logo-img { width:38px;height:38px;border-radius:11px; }
  body[data-fa-page=index] .header-actions {
    margin-left:auto;
    flex:0 0 auto;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
  }
  body[data-fa-page=index] #auth-container {
    order:2;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
  }
  body[data-fa-page=index] .mobile-menu-btn {
    order:1;
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    margin-left:0;
    border-radius:999px;
    color:var(--text-primary);
    flex:0 0 42px;
  }
  body[data-fa-page=index] .btn-login {
    min-height:38px;
    max-width:124px;
    padding:8px 14px;
    white-space:nowrap;
  }
  body[data-fa-page=index] .user-dropdown {
    position:fixed;
    top:66px;
    right:12px;
    left:auto;
    width:min(292px,calc(100vw - 24px));
    min-width:0;
    max-height:calc(100dvh - 82px);
    overflow:auto;
    z-index:1200;
    pointer-events:none;
  }
  body[data-fa-page=index] .user-dropdown.show {
    pointer-events:auto;
  }
}
@media (pointer:coarse) {
  button,.btn,[role=button],input,select { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important; }
}