/* ══════════════════════════════════════════════════════════
   dfx.css — DonghuaFlix Pro (capa visual que sobrescribe styles.css)
   Se carga DESPUÉS de styles.css.
   ══════════════════════════════════════════════════════════ */

/* ── base ── */
:root{--dfx-red:#e50914}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;background:#000}

/* ── tarjetas con zoom estilo Netflix ── */
.card{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;will-change:transform}
.card:hover{transform:translateY(-6px) scale(1.035);box-shadow:0 18px 44px rgba(0,0,0,.65),0 0 0 1px var(--dfx-red);z-index:5;position:relative}
.card .poster{overflow:hidden;border-radius:10px;position:relative}
.card .poster img{transition:transform .45s ease;display:block}
.card:hover .poster img{transform:scale(1.09)}
.card .badge{box-shadow:0 2px 8px rgba(0,0,0,.5);letter-spacing:.4px}
.card h3{font-weight:600;font-size:12.5px;line-height:1.3;margin-top:6px}

/* ── raíles con edge-fade ── */
.rail{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);padding:4px 2px}
.cw-rail{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.top10-row{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}

/* ── hero con parallax y fondo ambiental ── */
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-12%;background:var(--hero) center/cover no-repeat;filter:blur(28px) brightness(.5) saturate(1.3);transform:scale(1.15);z-index:0;will-change:transform;animation:dfxHeroIn 1.2s ease}
@keyframes dfxHeroIn{from{opacity:0}to{opacity:1}}
.hero > *{position:relative;z-index:1}
.hero h1{font-weight:900;letter-spacing:-1px;text-shadow:0 4px 30px rgba(0,0,0,.7)}

/* ─- reducir animaciones ── */
body.dfx-no-motion .card:hover{transform:none}
body.dfx-no-motion .hero::before{transform:none}
body.dfx-no-motion *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

/* ── sombras en capas ── */
.detail-v2 .detail-hero,.player,.episode-list,#dfsSheet,.dfxCalDay{box-shadow:0 20px 60px rgba(0,0,0,.5)}
.player{border-radius:12px;overflow:hidden}

/* ─- skeletons de brillo ── */
.skeleton{position:relative;overflow:hidden;background:#16161c;border-radius:10px}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.07) 50%,transparent 80%);animation:dfxShimmer 1.4s infinite;transform:translateX(-100%)}
@keyframes dfxShimmer{to{transform:translateX(100%)}}

/* ─- tipografía con degradado en títulos de sección ── */
.section-head h2{background:linear-gradient(120deg,#fff 55%,#ffb3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;letter-spacing:-.2px}

/* ─- botones ── */
.btn-x{transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn-x:hover{transform:translateY(-2px)}
.btn-x.play{box-shadow:0 8px 26px rgba(229,9,20,.35)}
.btn-x.play:hover{box-shadow:0 12px 34px rgba(229,9,20,.5)}

/* ─- glow ambiental (dfx-polish.js lo colorea) ── */
#dfxGlow{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;filter:blur(90px) saturate(1.4);transition:background 1s ease;background:transparent}
body.dfx-cine #dfxGlow{opacity:.3}
.player::before{content:'';position:absolute;inset:-40%;background:var(--dfx-glow,transparent);filter:blur(60px);opacity:.25;z-index:0;pointer-events:none}
.player iframe{position:relative;z-index:1}

/* ─- modo cine ── */
#dfxCineBtn{position:fixed;bottom:88px;right:16px;z-index:9997;width:46px;height:46px;border-radius:50%;background:rgba(20,20,25,.92);border:1px solid #333;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:transform .2s ease,border-color .2s ease;box-shadow:0 8px 24px rgba(0,0,0,.5)}
#dfxCineBtn:hover{transform:scale(1.08);border-color:var(--dfx-red)}
#dfxCineBtn svg{width:22px;height:22px}
body.dfx-cine .nav,body.dfx-cine .bottom-nav,body.dfx-cine footer,body.dfx-cine #dfxGlobalStats,body.dfx-cine #dfxBNWrap{display:none!important}
body.dfx-cine::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9990;background:radial-gradient(ellipse at 50% 0%,var(--dfx-glow,rgba(229,9,20,.35)),transparent 60%);mix-blend-mode:screen;opacity:.5}

/* ─- scrollbar ── */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:#0a0a0c}
::-webkit-scrollbar-thumb{background:#2a2a33;border-radius:99px;border:2px solid #0a0a0c}
::-webkit-scrollbar-thumb:hover{background:var(--dfx-red)}

/* ─- episodios: hover elegante ── */
.episode{transition:background .15s ease,transform .15s ease}
.episode:hover{background:#1a1a20;transform:translateX(4px)}

/* ─- estado vacío bonito ── */
.empty{padding:44px 20px;text-align:center}
.empty .dfxBig{font-size:42px;display:block;margin-bottom:10px;opacity:.65}