/* =============================================================================
   RateFlix — 3D motion layer. Transform/opacity only. html.rr-lite turns it off.
   ============================================================================= */
/* Smooth page-to-page transitions (Chrome/Edge/Android; others just load normally) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: rrVtOut .18s ease both; }
::view-transition-new(root) { animation: rrVtIn .26s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rrVtOut { to { opacity: 0; transform: scale(.985); } }
@keyframes rrVtIn { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.rr-topbar { view-transition-name: rr-top; } .rr-tabbar { view-transition-name: rr-tabs; }
::view-transition-old(rr-top), ::view-transition-new(rr-top), ::view-transition-old(rr-tabs), ::view-transition-new(rr-tabs) { animation: none; }

/* Floating 3D objects */
.rr-floats { position: absolute; inset: 0; pointer-events: none; z-index: 0; will-change: transform; }
.rr-cf { position: relative; }
.rr-cf > .rr-floats { z-index: 0; }
.rr-cf-track, .rr-cf-info, .rr-cf-pills, .rr-cf .rr-hero-dots { position: relative; z-index: 1; }
.rr-float { position: absolute; width: var(--sz); height: var(--sz); pointer-events: none; opacity: 0; transition: opacity .6s ease; perspective: 400px; }
.rr-float.in { opacity: 1; }
.rr-float img { width: 100%; height: 100%; display: block; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); will-change: transform; backface-visibility: hidden; transform: rotate(var(--rot, 0deg)); }
.rr-float.a-bob img   { animation: rrBob var(--d, 7s) ease-in-out var(--delay, 0s) infinite; }
.rr-float.a-sway img  { animation: rrSway var(--d, 8s) ease-in-out var(--delay, 0s) infinite; }
.rr-float.a-spin img  { animation: rrSpin3d var(--d, 10s) linear var(--delay, 0s) infinite; }
.rr-float.a-flip img  { animation: rrCoin var(--d, 3.6s) linear var(--delay, 0s) infinite; }
.rr-float.off img { animation-play-state: paused; }
@keyframes rrBob  { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); } 50% { transform: translate3d(0, -14px, 0) rotate(calc(var(--rot, 0deg) + 6deg)); } }
@keyframes rrSway { 0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)) rotateY(0); } 50% { transform: translate3d(-8px, -10px, 0) rotate(calc(var(--rot, 0deg) - 10deg)) rotateY(25deg); } }
@keyframes rrSpin3d { from { transform: rotateX(16deg) rotate(0); } to { transform: rotateX(16deg) rotate(360deg); } }
@keyframes rrCoin { from { transform: rotateY(0) translate3d(0, 0, 0); } 50% { transform: rotateY(180deg) translate3d(0, -6px, 0); } to { transform: rotateY(360deg) translate3d(0, 0, 0); } }
.rr-wd-card .rr-float, .rr-vip-hero .rr-float, .rr-banner .rr-float { z-index: 3; }
.rr-banner .rr-float + .rr-banner-body .rr-wallet-chip { margin-right: 0; }
.rr-auth-floats { position: fixed; z-index: 0; }

/* 3D tilt (driven by rr-fx.js through --rx / --ry) */
.rr-pc-img, .rr-cf-card.on, .rr-wd-card, .rr-vip-plan, .rr-tilt { transform-style: preserve-3d; }
.rr-pc-img.tilting, .rr-wd-card.tilting, .rr-vip-plan.tilting, .rr-tilt.tilting { transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.02); transition: transform .08s linear; }
.rr-pc-img, .rr-wd-card, .rr-vip-plan, .rr-tilt { transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.rr-pc-img.tilting::after, .rr-wd-card.tilting::after, .rr-vip-plan.tilting::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 55%); }

/* Coverflow cards: extra depth */
.rr-cf-card { box-shadow: 0 30px 50px -18px rgba(0,0,0,.7); }
.rr-cf-card.on .rr-art img { transform: translateZ(0) scale(1.01); }

/* Poster cards lift in 3D when pressed */
.rr-pc:active .rr-pc-img { transform: perspective(600px) rotateX(6deg) scale(.97); }

/* Tab bar: active icon flips in */
.rr-tabbar a.on .rr-i3 { animation: rrTabFlip .5s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes rrTabFlip { from { transform: perspective(200px) rotateY(-180deg) scale(.7); } to { transform: perspective(200px) rotateY(0) translateY(-1px) scale(1.08); } }

/* Success dialog: the coin spins in 3D */
.rr-alert.in .rr-alert-ic img[src*="/coins-"], .rr-alert.in .rr-alert-ic img[src*="/crown-"] { animation: rrAlertIcon .6s cubic-bezier(.3,1.5,.5,1) .05s both, rrCoinSoft 3s ease-in-out .7s infinite; }
@keyframes rrCoinSoft { 0%, 100% { transform: rotateY(0) translateY(0); } 50% { transform: rotateY(25deg) translateY(-5px); } }

/* Star picker: stars flip in 3D */
.rr-stars-pick button.on .s-on { animation: rrStarFlip .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes rrStarFlip { from { transform: perspective(300px) rotateY(-160deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------------------------------------------- lite mode -------- */
html.rr-lite .rr-float, html.rr-lite .rr-floats { display: none !important; }
html.rr-lite *, html.rr-lite *::before, html.rr-lite *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
html.rr-lite .rr-topbar, html.rr-lite .rr-tabbar, html.rr-lite .rr-toast, html.rr-lite .rr-alert, html.rr-lite .rr-seg, html.rr-lite .rr-wd-amount, html.rr-lite .rr-chip-glass, html.rr-lite .rr-earn-pill, html.rr-lite .rr-banner .rr-wallet-chip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.rr-lite .rr-tabbar { background: var(--bg-card, #151212) !important; }
html.rr-lite .rr-cf-bgi .rr-art { filter: none !important; opacity: .25; }
html.rr-lite .rr-watch-bg { display: none; }
@media (prefers-reduced-motion: reduce) { .rr-float img { animation: none !important; } @view-transition { navigation: none; } }

/* ===================================================== live earnings rain === */
.rr-detail-hero { position: relative; }
.rr-earnpill { position: absolute; z-index: 6; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: flex; align-items: center; gap: 10px;
    padding: 6px 16px 6px 6px; border-radius: 99px; white-space: nowrap; color: #fff;
    background: rgba(18,15,14,.78); border: 1px solid rgba(255,194,26,.35); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 4px rgba(255,194,26,.06);
    backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); animation: rrPillIn .5s cubic-bezier(.2,1.3,.3,1) both; }
.rr-earnpill[hidden] { display: none; }
@keyframes rrPillIn { from { opacity: 0; transform: translate(-50%, 90%) scale(.8); } to { opacity: 1; transform: translate(-50%, 50%); } }
.rr-ep-wallet { position: relative; width: 46px; height: 46px; display: grid; place-items: center; flex-shrink: 0; }
.rr-ep-wallet .rr-i3 { width: 28px; height: 28px; }
.rr-ep-ring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.rr-ep-ring #epArc { transition: stroke-dashoffset 1s linear; }
.rr-ep-txt small { display: block; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #FFD66B; }
.rr-ep-txt b { display: block; font-size: 1.25rem; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.rr-ep-goal { font-size: .72rem; color: rgba(255,255,255,.65); margin-left: 4px; }
.rr-ep-goal b { color: #fff; }
.rr-earnpill.done { border-color: rgba(34,197,94,.6); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 4px rgba(34,197,94,.15), 0 0 40px rgba(34,197,94,.25); }
.rr-earnpill.done .rr-ep-txt b { color: #4ADE80; }
.rr-earnpill.done #epArc { stroke: #22C55E; }
.rr-detail-hero:has(.rr-earnpill:not([hidden])) + .rr-detail-title { padding-top: 30px; }
.rr-bump { animation: rrBump .4s cubic-bezier(.3,1.7,.5,1); }
@keyframes rrBump { 40% { transform: scale(1.18); } }
.rr-rain { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; perspective: 900px; }
.rr-bill { position: absolute; left: 0; top: 0; transform-style: preserve-3d; will-change: transform, opacity; }
.rr-bill i { position: absolute; inset: 0; border-radius: 4px; background-size: cover; background-position: center; backface-visibility: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.rr-bill i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 48%, transparent 64%); mix-blend-mode: soft-light; }
.rr-bill i.bk { transform: rotateY(180deg); }
.rr-plus { position: fixed; z-index: 61; font-weight: 900; font-size: .9rem; color: #4ADE80; text-shadow: 0 2px 8px rgba(0,0,0,.6); will-change: transform, opacity; pointer-events: none; }
html.rr-lite .rr-earnpill { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #181413; animation: none; transform: translate(-50%, 50%); }
/* smoother rain: cheaper faces (no live shadow/blend while rotating in 3D), isolated layer */
.rr-rain { contain: strict; }
.rr-bill { backface-visibility: visible; }
.rr-bill i { box-shadow: none !important; outline: 1px solid rgba(0,0,0,.18); outline-offset: -1px; transform: translateZ(0); }
.rr-bill i.bk { transform: rotateY(180deg) translateZ(0); }
.rr-bill i::after { mix-blend-mode: normal !important; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%) !important; }
.rr-plus { will-change: transform, opacity; }

/* ============================================ compact login / register ==== */
.auth-form-panel { padding: 14px 12px !important; align-items: flex-start !important; }
@media (min-height: 760px) { .auth-form-panel { align-items: center !important; } }
.auth-form-inner { padding: 18px 16px 16px !important; border-radius: 22px !important; box-shadow: 0 20px 50px -20px rgba(0,0,0,.6) !important; }
.auth-mobile-logo { margin-bottom: 10px !important; }
.auth-form-header { margin-bottom: 12px !important; }
.auth-form-header h2 { font-size: 1.45rem !important; margin-bottom: 2px !important; letter-spacing: -.03em !important; }
.auth-form-header p { font-size: .86rem !important; }
.auth-form-grid { gap: 10px !important; margin-bottom: 12px !important; }
.auth-form-inner .form-group { margin-bottom: 0 !important; }
.auth-form-inner .form-group.span-2[style*="margin:2px"] { margin: 0 0 10px !important; }
.auth-form-inner .form-label { font-size: .72rem !important; letter-spacing: .02em !important; text-transform: none !important; font-weight: 700 !important; margin-bottom: 4px !important; color: var(--text-secondary) !important; }
.auth-form-inner .form-input, .auth-form-inner .form-select, .auth-form-inner select { height: 46px !important; min-height: 46px !important; font-size: .95rem !important; border-radius: 12px !important; }
.auth-form-inner .form-hint, .auth-form-inner small { font-size: .7rem !important; margin-top: 3px !important; }
.auth-form-inner .btn-lg, .auth-form-inner .btn-full { height: 48px !important; min-height: 48px !important; margin-top: 4px !important; }
.auth-form-inner .alert { margin-bottom: 10px !important; padding: 8px 12px !important; }
.referral-banner { margin-bottom: 10px !important; padding: 8px 12px !important; }

/* Sign in / register: card centred in the visible screen, account switch link at the bottom */
.auth-shell { min-height: 100vh; min-height: 100svh; }
.auth-form-panel { align-items: center !important; min-height: 100vh; min-height: 100svh; }
@supports (align-items: safe center) { .auth-form-panel { align-items: safe center !important; } }
.auth-switch { text-align: center; margin: 14px 0 0; font-size: .9rem; color: var(--text-secondary); }
.auth-switch a { font-weight: 800; color: var(--rr-red, var(--accent-primary)); text-decoration: none; }
.auth-form-header p:empty { display: none; }
[data-theme="light"] .auth-switch a, [data-theme="light"] .forgot-link, [data-theme="light"] .auth-form-inner a:not(.btn) { color: #C2410C !important; }

/* Autofill detection hook for the login page (no visual change) */
@keyframes rrAutofill { from { opacity: 1; } to { opacity: 1; } }
input:-webkit-autofill { animation: rrAutofill .01s; }
input:autofill { animation: rrAutofill .01s; }
.btn.rr-autofill-go { box-shadow: 0 0 0 4px rgba(255,138,61,.35), 0 0 26px rgba(255,106,26,.6) !important; filter: brightness(1.08); }
.btn.rr-autofill-go::after { content: ""; }