/*
 * Android smoothness layer (WebView app + Android Chrome).
 * Scoped to html.sw-android, which public/js/zoom-lock.js sets before the app renders.
 * Goal: the same luxury glass look with far less GPU/main-thread work per frame.
 */

/* 1. Glass inside glass. A blurred control sitting on an already-blurred glass card costs a
 *    whole extra GPU blur pass + render surface (redrawn on every scroll frame) just to add a
 *    faint tint: Chrome blurs only the card's own background behind the control, which is a
 *    flat colour, so the "blur" is really "card colour, saturated, once more". On Android we
 *    drop that inner blur and paint the identical tint as a flat colour instead
 *    (control bg OVER saturate(card bg)); the outer card keeps its real blur.
 *    Measured: Settings blur surfaces 34 -> 14, render-pass draws on open+scroll 192 -> 84.
 *    The tint values are derived from the current app.css/brand-theme.css colours:
 *    if those card/control colours change, recompute them (scratch tool gencomp.js).
 *    Touch-primary screens only: :hover paints are limited to real hover pointers
 *    (@media (hover: hover) and (pointer: fine)), so there is no sticky-hover state to keep here,
 *    and an Android device driven by a mouse keeps its normal hover tints.
 *    Pressed (:active) keeps the original glass rules; the press-feedback layer
 *    (css/press-feedback.css, loaded after this file) only uses scale/border-color/box-shadow,
 *    which this file never sets on these controls, so tap feedback is unchanged. */
@media (hover: none), (pointer: coarse) {
  html.sw-android .nav button:not(:active) .icon-btn,
  html.sw-android .settings-screen .settings-list > .settings-row:not(:active),
  html.sw-android .settings-screen .settings-list #lang-switch:not(:focus),
  html.sw-android .topbar #back:not(:active),
  html.sw-android .topbar #group-create:not(:active),
  html.sw-android .me-card .me-stat,
  html.sw-android .me-card .btn:not(:active),
  html.sw-android .glass-card #help-report-chat:not(:active) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.sw-android .nav button:not(:active) .icon-btn { background-color: rgba(255, 255, 255, .075) !important; }
  html.sw-android .nav button.active:not(:active) .icon-btn { background-color: rgba(213, 75, 255, .2) !important; }
  html.sw-android .settings-screen .settings-list > .settings-row:not(.danger):not(:active),
  html.sw-android .settings-screen .settings-list #lang-switch:not(:focus) { background-color: rgba(61, 57, 75, .466) !important; }
  html.sw-android .settings-screen .settings-list > .settings-row.danger:not(:active) { background-color: rgba(86, 37, 69, .501) !important; }
  html.sw-android .topbar #back:not(:active) { background-color: rgba(87, 51, 137, .624) !important; }
  html.sw-android .topbar #group-create:not(:active) { background-color: rgba(56, 38, 85, .673) !important; }
  html.sw-android .me-card .me-stat:nth-child(1) { background-color: rgba(55, 57, 67, .501) !important; }
  html.sw-android .me-card .me-stat:nth-child(2) { background-color: rgba(71, 48, 60, .501) !important; }
  html.sw-android .me-card .btn.secondary:not(:active) { background-color: rgba(54, 48, 65, .461) !important; }
  html.sw-android .me-card #edit-profile:not(:active),
  html.sw-android .glass-card #help-report-chat:not(:active) { background-color: rgba(21, 15, 40, .42) !important; }
}

/* 2. Top-3 vote ranking glow: animating box-shadow repaints the row on the main thread
 *    every frame for as long as Home is open. Draw the same peak glow once on a
 *    pseudo-element and pulse only its opacity, which the compositor animates for free. */
html.sw-android .vote-ranking-row.vote-rank-top-1,
html.sw-android .vote-ranking-row.vote-rank-top-2,
html.sw-android .vote-ranking-row.vote-rank-top-3 {
  position: relative;
  animation: none;
}
html.sw-android .home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-1,
html.sw-android .home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-2,
html.sw-android .home-screen .vote-ranking-scroller.is-compact .vote-ranking-row.vote-rank-top-3 {
  animation: vote-ranking-up-step .36s cubic-bezier(.22, .7, .22, 1) both;
}
html.sw-android .vote-ranking-row.vote-rank-top-1::after,
html.sw-android .vote-ranking-row.vote-rank-top-2::after,
html.sw-android .vote-ranking-row.vote-rank-top-3::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  animation: sw-android-glow-pulse 2.4s ease-in-out infinite;
}
html.sw-android .vote-ranking-row.vote-rank-top-1::after { box-shadow: 0 0 18px rgba(255, 209, 102, .2), inset 0 1px 0 rgba(255, 255, 255, .16); }
html.sw-android .vote-ranking-row.vote-rank-top-2::after { box-shadow: 0 0 14px rgba(210, 225, 247, .15), inset 0 1px 0 rgba(255, 255, 255, .14); animation-duration: 2.8s; }
html.sw-android .vote-ranking-row.vote-rank-top-3::after { box-shadow: 0 0 12px rgba(230, 164, 112, .14), inset 0 1px 0 rgba(255, 255, 255, .14); animation-duration: 3.2s; }
html.sw-android .profile-voters .profile-voter-podium-card.vote-rank-top-1::after,
html.sw-android .profile-voters .profile-voter-podium-card.vote-rank-top-2::after,
html.sw-android .profile-voters .profile-voter-podium-card.vote-rank-top-3::after { content: none; }
@keyframes sw-android-glow-pulse { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.sw-android .vote-ranking-row.vote-rank-top-1::after,
  html.sw-android .vote-ranking-row.vote-rank-top-2::after,
  html.sw-android .vote-ranking-row.vote-rank-top-3::after { animation: none; }
}

/* 3. The pull-to-refresh spinner lives off-screen at opacity 0 until the user pulls;
 *    stop it spinning (and keeping the frame loop awake) while it cannot be seen. */
html.sw-android .home-screen:not(.is-pulling):not(.is-refreshing) .home-refresh-indicator .ui-loading-spinner {
  animation-play-state: paused;
}