/* ==========================================================================
   AniMus — liquid glass + 3D interaction layer
   Loads after style.css. Pointer-driven values (--mx --my --sa --rx --ry --hx --hy)
   are set by js/fx.js; everything degrades to a calm static look without it.
   ========================================================================== */

@property --sa { syntax: '<number>'; inherits: false; initial-value: 0 }
@property --ga { syntax: '<number>'; inherits: false; initial-value: 0 }

:root {
  --ease-liquid: cubic-bezier(.34, 1.45, .55, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --edge: rgba(255, 255, 255, .2);
  /* the bevel: bright top edge, soft inner rim */
  --spec: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(255, 255, 255, .1),
          inset 1px 0 0 rgba(255, 255, 255, .14), inset -1px 0 0 rgba(255, 255, 255, .06),
          inset 0 0 24px rgba(255, 255, 255, .05);
  --drop: 0 18px 44px -18px rgba(4, 0, 18, .85);
}

/* ---------- ambient light behind the glass ---------- */
.liquid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  translate: calc((var(--px, .5) - .5) * -44px) calc((var(--py, .5) - .5) * -30px); transition: translate .8s var(--ease-out) }
.liquid-bg i { position: absolute; border-radius: 50%; will-change: transform }
.liquid-bg i:nth-child(1) { width: 62vmax; height: 62vmax; left: -20vmax; top: -24vmax;
  background: radial-gradient(circle at 40% 40%, rgba(130, 70, 255, .55), transparent 62%); animation: drift1 26s ease-in-out infinite alternate }
.liquid-bg i:nth-child(2) { width: 52vmax; height: 52vmax; right: -18vmax; top: 16vh;
  background: radial-gradient(circle, rgba(60, 140, 255, .3), transparent 62%); animation: drift2 32s ease-in-out infinite alternate }
.liquid-bg i:nth-child(3) { width: 46vmax; height: 46vmax; left: 18vw; bottom: -28vmax;
  background: radial-gradient(circle, rgba(255, 80, 170, .24), transparent 62%); animation: drift3 38s ease-in-out infinite alternate }
@keyframes drift1 { to { transform: translate3d(14vmax, 10vmax, 0) scale(1.14) } }
@keyframes drift2 { to { transform: translate3d(-12vmax, 14vmax, 0) scale(1.1) } }
@keyframes drift3 { to { transform: translate3d(16vmax, -10vmax, 0) scale(1.2) } }

/* ---------- the glass recipe ---------- */
.top, .tabbar, .gp, .btn, select, .chipsrow a, .meta, .sg, .ctl, .rb, .toast,
.tag, .tabs a, .eps a, .sblock, .adm.row, .note {
  --surface: radial-gradient(190px circle at var(--mx, 50%) var(--my, -70%), rgba(255, 255, 255, calc(.07 + var(--sa, 0) * .2)), transparent 65%),
             linear-gradient(155deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .09));
  --surface-hot: radial-gradient(190px circle at var(--mx, 50%) var(--my, -70%), rgba(255, 255, 255, calc(.26 + var(--sa, 0) * .22)), transparent 62%),
                 linear-gradient(135deg, #b88aff, #7b3fe4 75%);
  background: var(--surface);
  border: 1px solid var(--edge);
  box-shadow: var(--spec), var(--drop);
  transition: --sa .35s ease;
}
/* blur only where it is big or sparse; lists of small chips stay flat for speed */
.top, .tabbar, .gp, .sg, .ctl, .meta, .toast, .rb, .btn, select, .chipsrow a {
  -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(18px) saturate(185%) brightness(1.06);
}
.tag, .eps a, .tabs a, .sblock, .adm.row, .note { box-shadow: var(--spec); }
.tag { border-color: var(--edge); backdrop-filter: none; -webkit-backdrop-filter: none }

/* Chromium: real refraction through an SVG displacement map (set by fx.js) */
.refract .top, .refract .tabbar {
  -webkit-backdrop-filter: blur(10px) saturate(185%) brightness(1.06) url(#lg-refract);
  backdrop-filter: blur(10px) saturate(185%) brightness(1.06) url(#lg-refract);
}

.top { transition: transform .35s ease, --sa .35s ease }
.top .brand { text-shadow: 0 0 22px rgba(166, 91, 255, .55) }
.search input { background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -8px 16px -10px rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .16) }
.search input:focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 0 4px rgba(166, 91, 255, .28) }
.sg { background: linear-gradient(155deg, rgba(46, 34, 82, .8), rgba(16, 12, 30, .88)) }

/* ---------- nav "lens": one glass bead slides under the active link ---------- */
.nav, .tabbar { position: relative; isolation: isolate }
.nav a, .tabbar a { position: relative; z-index: 1 }
.nav::before, .tabbar::before {
  content: ""; position: absolute; z-index: 0; left: 0; top: 0; pointer-events: none;
  width: var(--lw, 0px); height: var(--lh, 0px); translate: var(--lx, 0px) var(--lt, 0px);
  border-radius: 99px; opacity: var(--lo, 0);
  background: linear-gradient(160deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .06)), rgba(166, 91, 255, .32);
  box-shadow: var(--spec), 0 8px 22px -8px rgba(166, 91, 255, .75);
  transition: translate .6s var(--ease-liquid), width .5s var(--ease-liquid), height .5s var(--ease-liquid), opacity .3s;
}
.tabbar::before { border-radius: 18px }
.nav.jelly::before, .tabbar.jelly::before { animation: jelly .55s var(--ease-out) }
@keyframes jelly { 35% { scale: 1.16 .86 } 70% { scale: .97 1.05 } }
.nav a:hover, .nav a.on, .tabbar a.on { background: transparent; box-shadow: none }
.nav a.on, .tabbar a.on { color: #fff }

/* ---------- buttons: magnetic, springy, specular ---------- */
.btn { translate: var(--tx, 0px) var(--ty, 0px); transition: --sa .35s ease, translate .45s var(--ease-liquid), scale .35s var(--ease-liquid), border-color .2s, box-shadow .3s }
.btn, .btn:hover { background: var(--surface) }
.btn:hover { border-color: rgba(255, 255, 255, .38) }
.btn:active { transform: none; scale: .95 }
.btn.hot, .btn.hot:hover {
  background: var(--surface-hot); border-color: rgba(255, 255, 255, .38); color: #fff;
  box-shadow: var(--spec), 0 14px 34px -12px rgba(166, 91, 255, .85);
}
.btn.on { border-color: rgba(201, 182, 255, .7) }
.chipsrow a { transition: --sa .35s ease, translate .4s var(--ease-liquid), border-color .2s }
.chipsrow a:hover { background: var(--surface); transform: none; translate: 0 -3px; border-color: rgba(255, 255, 255, .4) }
.tabs a.on, .eps a.on, .eps a.on:hover { background: var(--surface-hot); border-color: rgba(255, 255, 255, .4); color: #fff }
.eps a { transition: --sa .3s ease, translate .35s var(--ease-liquid), scale .35s var(--ease-liquid) }
.eps a:hover { background: var(--surface); translate: 0 -2px; scale: 1.07 }
.eps a.on:hover { background: var(--surface-hot) }
.tabs a { transition: --sa .3s ease, translate .35s var(--ease-liquid) }
.tabs a:hover { translate: 0 -2px }
select { box-shadow: var(--spec) }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(166, 91, 255, .5) }
.search input:focus-visible, select:focus-visible { outline-offset: 1px }

/* ---------- posters: 3D tilt with depth ---------- */
.rail { padding: 20px 8px 16px; margin: -20px -8px -8px; scroll-padding-inline: 8px }
.poster {
  --tf: perspective(820px) translate3d(0, var(--ly, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transform: var(--tf); transform-style: preserve-3d; overflow: visible;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: calc(var(--sx, 0) * -14px) calc(var(--sy, 0) * -14px + 14px) 30px -14px rgba(0, 0, 0, .65);
}
/* (.card .poster is listed too: style.css sets its transition with that specificity) */
.poster, .card .poster, .t10i .poster { transition: transform .65s var(--ease-liquid), box-shadow .45s ease, border-color .3s ease, --ga .3s ease }
.poster.is-tilting, .card .poster.is-tilting, .t10i .poster.is-tilting { transition: transform .12s linear, box-shadow .2s ease, border-color .3s ease, --ga .3s ease; --ga: 1 }
.card:hover .poster, .card:active .poster, .t10i:hover .poster { transform: var(--tf) }
.card:hover .poster, .t10i:hover .poster { --ly: -6px; --sc: 1.035; border-color: rgba(255, 255, 255, .4);
  box-shadow: calc(var(--sx, 0) * -16px) calc(var(--sy, 0) * -16px + 22px) 44px -16px rgba(166, 91, 255, .7) }
.card:active .poster { --sc: .97 }
.poster img { border-radius: inherit }
.poster::after { border-radius: 0 0 var(--r) var(--r) }
.poster::before { /* rim light + glare that follows the pointer */
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, calc(var(--ga) * .3)), transparent 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.poster .bar { border-bottom-left-radius: var(--r); translate: 0 0 6px }
/* overlays float above the cover. (no blur here: backdrop-filter and preserve-3d don't mix) */
.poster .score, .bdg, .lg, .qa, .hx { translate: 0 0 26px }
.poster .score, .bdg b, .qa { backdrop-filter: none; -webkit-backdrop-filter: none }
.poster .score, .qa { background: rgba(14, 10, 26, .66) }
.lg i { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(14, 10, 26, .6) }
.t10i .n { transition: transform .5s var(--ease-liquid), -webkit-text-stroke-color .3s, filter .3s }
.t10i:hover .n { -webkit-text-stroke-color: #fff; filter: drop-shadow(0 0 16px rgba(166, 91, 255, .85)); transform: translateX(-6px) }

/* admin: hide from site */
.hx { position: absolute; left: 8px; top: 40px; z-index: 4; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: rgba(14, 10, 26, .72); border: 1px solid rgba(255, 255, 255, .3); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .2s, background .2s }
.hx:hover { background: rgba(255, 80, 120, .7) }
.card:hover .hx, .t10i:hover .hx, .card:focus-within .hx, .hx:focus-visible { opacity: 1; pointer-events: auto }
@media (hover: none) { .hx { opacity: 1; pointer-events: auto } }
.gone { pointer-events: none }
.rv.in .card.gone, .rv.in .t10i.gone, .grid .card.gone { animation: gone .38s ease forwards }
@keyframes gone { to { opacity: 0; transform: perspective(600px) scale(.78) rotateX(18deg) translateY(10px) } }

/* ---------- entrances: depth instead of a flat fade ---------- */
.pg { animation: pg3d .7s var(--ease-out) both }
@keyframes pg3d { from { opacity: 0; transform: perspective(1100px) translateY(20px) rotateX(-4deg) scale(.988) } to { opacity: 1; transform: none } }
.rv { opacity: 0; transform: perspective(900px) translateY(26px) rotateX(7deg); transform-origin: 50% 0; transition: opacity .7s ease, transform .8s var(--ease-out) }
.rv.in { opacity: 1; transform: none }
.rv.in .card, .rv.in .t10i, .grid .card { animation: cardIn .75s var(--ease-liquid) backwards; animation-delay: calc(var(--i, 0) * 50ms + 80ms) }
@keyframes cardIn { from { opacity: 0; transform: perspective(700px) translateY(30px) rotateX(14deg) scale(.94) } }

/* ---------- hero: layered depth ---------- */
.hc { box-shadow: 0 40px 90px -40px rgba(120, 50, 230, .6), inset 0 1px 0 rgba(255, 255, 255, .25) }
.sbg { inset: -4%; translate: calc(var(--hx, 0) * -16px) calc(var(--hy, 0) * -10px); transition: translate .6s var(--ease-out) }
.slide.on .sbg { animation: kb 11s ease-out both }
@keyframes kb { from { transform: scale(1.09) } to { transform: scale(1) } }
.gp { text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
  transform: perspective(1000px) rotateY(calc(var(--hx, 0) * 4deg)) rotateX(calc(var(--hy, 0) * -3deg));
  transition: transform .5s var(--ease-out), opacity .8s ease, translate .9s var(--ease-out), filter .8s ease, --sa .35s ease }
.slide .gp { opacity: 0; translate: 0 24px; filter: blur(10px) }
.slide.on .gp { opacity: 1; translate: 0 0; filter: none; transition-delay: 0s, 0s, .2s, .2s, 0s }
.hcov { position: absolute; z-index: 2; right: 7%; top: 50%; width: min(24%, 230px); aspect-ratio: 2 / 3;
  border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .34);
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .9), 0 0 60px -10px rgba(166, 91, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .5);
  translate: calc(var(--hx, 0) * 16px) calc(-50% + var(--hy, 0) * 12px);
  transform: perspective(1000px) rotateY(calc(-14deg + var(--hx, 0) * -9deg)) rotateX(calc(var(--hy, 0) * 7deg));
  opacity: 0; scale: .9;
  transition: transform .5s var(--ease-out), translate .5s var(--ease-out), opacity .8s ease, scale .9s var(--ease-liquid);
}
.slide.on .hcov { opacity: 1; scale: 1; transition-delay: 0s, 0s, .25s, .25s }
.hcov img { width: 100%; height: 100%; object-fit: cover; display: block }
.hcov::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .3) 0%, transparent 36%, transparent 64%, rgba(255, 255, 255, .1) 100%) }
.dots button { transition: width .45s var(--ease-liquid), background .3s }

/* ---------- player + misc ---------- */
.fplay { background: linear-gradient(155deg, rgba(255, 255, 255, .34), rgba(166, 91, 255, .3)); box-shadow: var(--spec), 0 0 0 0 rgba(166, 91, 255, .6) }
.facade:hover .fplay { transform: scale(1.1) }
.fcap { box-shadow: var(--spec) }
.ctl { box-shadow: none; border-radius: 0 0 22px 22px }
.meta { box-shadow: var(--spec) }

.toast { background: var(--surface); color: #fff; display: flex; align-items: center; gap: 12px;
  transition: opacity .3s ease, transform .5s var(--ease-liquid), --sa .3s }
.toast.act { pointer-events: auto }
.toast button { border: 0; border-radius: 99px; padding: 4px 12px; font: 600 13px Inter, sans-serif; color: #fff; background: rgba(166, 91, 255, .6); cursor: pointer }
.toast button:hover { background: rgba(166, 91, 255, .85) }

/* ---------- phones: lighter ---------- */
@media (max-width: 760px) {
  .hcov { display: none }
  .liquid-bg i:nth-child(3) { display: none }
  .rail { padding-inline: 4px; margin-inline: -4px }
}

/* ---------- fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .tabbar, .gp, .sg, .ctl, .meta, .toast, .rb, .btn:not(.hot), select, .chipsrow a { background: rgba(28, 20, 50, .92) }
}
@media (prefers-reduced-transparency: reduce) {
  * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
  .top, .tabbar, .gp, .sg, .ctl, .meta, .toast, .rb, .btn:not(.hot), select, .chipsrow a { background: #1b142e !important }
}
@media (prefers-reduced-motion: reduce) {
  .liquid-bg i, .slide.on .sbg { animation: none !important }
  .poster, .gp, .hcov { transform: none !important }
  .slide .gp { opacity: 1; translate: none; filter: none }
  .hcov { opacity: 1; scale: 1 }
}

/* first placement of the lens should not slide in from the left */
.nav.lens-init::before, .tabbar.lens-init::before { transition: none }