/* NetReelz title pages - shared stylesheet.
   Tokens are lifted from the Flutter app's lib/utils/color.dart so web and app
   stay one system. Arabic RTL throughout. */

/* Tokens from lib/utils/color.dart — web and app stay one system */
:root{
  --ink:#141414; --surface:#1A1A1A; --raised:#232323;
  --teal:#E50914; --mid:#B20710; --slate:#7A0509; --cyan:#F6121D;
  --glow-teal:#5A0A0E; --glow-blue:#3D0709;
  --glass:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.24);
  --t1:#FFFFFF; --t2:#A7B0BC; --t3:#6B7280; --gold:#FFBA6F;
  --brand:linear-gradient(260deg,var(--cyan),var(--teal) 45%,var(--mid));
  --ar:"Tajawal",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lt:"Urbanist",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--t1);
  font-family:var(--ar);font-weight:500;line-height:1.7}
.latin{font-family:var(--lt)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
bdi{unicode-bidi:isolate}

/* ═══ Stage: key art fills the screen, faded behind the content ═══
   Normal stacking only (no fixed / negative z-index) so it survives any host wrapper. */
.stage{position:relative;z-index:0;min-height:100vh;
  display:flex;flex-direction:column;overflow:hidden}
.stage__art{position:absolute;inset:0;z-index:0}
.stage__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* RTL: the heavy side of the wash sits on the right, under the type */
.stage__art::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top, var(--ink) 0%, color-mix(in srgb,var(--ink) 62%,transparent) 30%,
      color-mix(in srgb,var(--ink) 18%,transparent) 62%, color-mix(in srgb,var(--ink) 38%,transparent) 100%),
    linear-gradient(to left, color-mix(in srgb,var(--ink) 68%,transparent) 0%,
      color-mix(in srgb,var(--ink) 20%,transparent) 50%, transparent 78%)}
.bar,.hero{position:relative;z-index:1}

/* ═══ Top bar ═══ */
.bar{display:flex;align-items:center;gap:clamp(1rem,3vw,2.4rem);
  padding:clamp(1rem,2.2vw,1.7rem) clamp(1.2rem,4vw,3.4rem);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:900;font-size:1.06rem;letter-spacing:-.02em}
.mark{width:30px;height:30px;flex:none;
  background:url("data:image/png;base64,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") center/contain no-repeat}
.mark i{display:none}
.anchors{display:flex;gap:clamp(.9rem,2vw,1.7rem);flex-wrap:wrap}
.anchors a{font-size:.84rem;font-weight:700;color:var(--t2);
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:color .18s,border-color .18s}
.anchors a:hover{color:var(--t1);border-bottom-color:var(--teal)}
.bar .sp{flex:1}
.icons{display:flex;align-items:center;gap:.55rem}
.ico{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--glass);color:var(--t1);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:border-color .18s,background .18s,color .18s}
.ico:hover{border-color:var(--line-strong);background:rgba(255,255,255,.14)}
.ico.on{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.signin{font-size:.86rem;font-weight:700;color:var(--t2);white-space:nowrap}
.signin:hover{color:var(--t1)}

/* ═══ Hero ═══ */
.hero{margin-top:auto;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:end;
  padding:clamp(2rem,5vw,3rem) clamp(1.2rem,4vw,3.4rem) clamp(2rem,4vw,3.2rem)}

.kicker{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.badge{display:inline-flex;align-items:center;padding:.32rem .7rem;border-radius:6px;
  font-size:.76rem;font-weight:800;
  color:var(--cyan);background:color-mix(in srgb,var(--cyan) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.badge--sample{color:var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent);
  border-color:color-mix(in srgb,var(--gold) 38%,transparent)}

.title{margin:0;font-weight:900;line-height:1.16;font-size:clamp(2.8rem,7vw,5.4rem);
  text-wrap:balance;text-shadow:0 8px 44px rgba(0,0,0,.7)}
.subtitle{margin:.3rem 0 0;font-size:clamp(.95rem,1.9vw,1.25rem);font-weight:700;
  color:var(--t2);letter-spacing:.03em;text-shadow:0 3px 18px rgba(0,0,0,.6)}

.meta{display:flex;align-items:center;gap:.5rem .85rem;flex-wrap:wrap;margin-top:1rem;
  color:var(--t2);font-size:.92rem;font-weight:600}
.meta .sep{opacity:.42}
.score{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold);font-weight:800}
.score b{color:var(--t1);font-family:var(--lt)}
.num{font-family:var(--lt);font-variant-numeric:tabular-nums}

.synopsis{margin:1rem 0 0;max-width:54ch;color:#D2D9E1;font-size:1.06rem;line-height:1.95;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}

.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 2rem;border-radius:10px;font-weight:800;font-size:.98rem;
  transition:transform .18s,filter .18s,background .18s,border-color .18s}
.btn--play{background:var(--brand);color:#fff;
  box-shadow:0 16px 38px color-mix(in srgb,var(--teal) 42%,transparent)}
.btn--play:hover{filter:brightness(1.12)}
.btn--play svg{transform:scaleX(-1)}
.btn--ghost{background:var(--glass);border:1px solid var(--line);color:var(--t1);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn--ghost:hover{border-color:var(--line-strong);background:rgba(255,255,255,.14)}
.btn:active{transform:translateY(1px)}

/* ═══ Rail ═══ */
.rail{display:flex;flex-direction:column;gap:clamp(1.2rem,2.6vw,1.8rem)}
.rail h2{margin:0 0 .75rem;font-size:1.08rem;font-weight:800}
.h2row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.more-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.84rem;font-weight:700;
  color:var(--teal);transition:color .18s,gap .18s}
.more-link:hover{color:var(--cyan);gap:.5rem}
.strip,.faces{display:flex;gap:.7rem;overflow-x:auto;padding-bottom:.4rem;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.strip::-webkit-scrollbar,.faces::-webkit-scrollbar{height:5px}
.strip::-webkit-scrollbar-thumb,.faces::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.shot{position:relative;flex:none;width:128px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;
  border:1px solid var(--line);transition:transform .2s,border-color .2s}
.shot:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot .n{position:absolute;inset-inline-start:8px;bottom:6px;font-size:.74rem;font-weight:800;
  text-shadow:0 1px 6px rgba(0,0,0,.95)}
.faces{gap:.85rem}
.face{flex:none;width:82px;text-align:center}
.face .av{width:56px;height:56px;border-radius:50%;margin:0 auto .42rem;overflow:hidden;
  border:1px solid var(--line-strong);transition:transform .2s}
.face:hover .av{transform:translateY(-3px)}
.face .av img{width:100%;height:100%;object-fit:cover}
.face .nm{font-size:.78rem;font-weight:700;line-height:1.4;min-height:2.8em;
  display:flex;align-items:center;justify-content:center}
.face .rl{font-size:.72rem;color:var(--t3);font-weight:500;line-height:1.4}

/* ═══ Below the fold ═══ */
.below{position:relative;background:var(--ink);
  background-image:
    radial-gradient(700px 420px at 94% 0%, color-mix(in srgb,var(--glow-teal) 30%,transparent), transparent 70%),
    radial-gradient(600px 400px at 4% 22%, color-mix(in srgb,var(--glow-blue) 26%,transparent), transparent 72%);
  background-repeat:no-repeat}
.wrap{width:min(100% - clamp(2.4rem,8vw,6.8rem),1240px);margin-inline:auto}
.sec{padding:clamp(2.6rem,6vw,4.2rem) 0 0}
.h2{margin:0 0 1.2rem;font-size:.95rem;font-weight:900;color:var(--teal)}

.eps{display:grid;gap:.6rem}
.ep{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;
  padding:.9rem 1.15rem;border:1px solid var(--line);border-radius:13px;
  background:color-mix(in srgb,var(--surface) 85%,transparent);
  transition:border-color .18s,background .18s}
.ep:hover{border-color:var(--line-strong);background:var(--raised)}
.epn{font-family:var(--lt);font-size:1.1rem;font-weight:900;color:var(--t3);
  font-variant-numeric:tabular-nums;min-width:2ch}
.ept{font-weight:800;font-size:1.04rem}
.epd{font-family:var(--lt);font-size:.84rem;color:var(--t3);font-weight:600;font-variant-numeric:tabular-nums}
.ep--locked .ept{color:var(--t2)}
.tag{display:inline-flex;align-items:center;gap:.3rem;padding:.34rem .8rem;border-radius:999px;
  font-size:.8rem;font-weight:800;white-space:nowrap}
.tag--free{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 36%,transparent)}
.tag--coin{color:var(--gold);background:color-mix(in srgb,var(--gold) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 32%,transparent)}

.rowposters{display:flex;gap:1rem;overflow-x:auto;padding-bottom:.6rem;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rowposters::-webkit-scrollbar{height:6px}
.rowposters::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.card{flex:none;width:clamp(124px,14vw,168px)}
.card .ph{aspect-ratio:2/3;border-radius:13px;overflow:hidden;border:1px solid var(--line);
  transition:transform .2s,border-color .2s}
.card:hover .ph{transform:translateY(-5px);border-color:var(--line-strong)}
.card img{width:100%;height:100%;object-fit:cover}
.card .t{margin-top:.6rem;font-size:.92rem;font-weight:800;line-height:1.45}
.card .s{font-size:.78rem;color:var(--t3);font-weight:500}

footer{margin-top:clamp(3rem,7vw,5rem);border-top:1px solid var(--line);
  padding:2rem 0 3rem;color:var(--t3);font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center}

/* ═══ Share sheet ═══ */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.2rem;
  background:rgba(2,6,12,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .22s}
.sheet.on{opacity:1;pointer-events:auto}
.sheet__box{width:min(100%,440px);background:var(--surface);border:1px solid var(--line-strong);
  border-radius:18px;padding:1.5rem;transform:translateY(10px) scale(.985);
  transition:transform .22s;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.sheet.on .sheet__box{transform:none}
.sheet h3{margin:0 0 .2rem;font-size:1.2rem;font-weight:900}
.sheet p{margin:0 0 1.15rem;font-size:.9rem;color:var(--t3)}
.nets{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;margin-bottom:1.15rem}
.net{display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.85rem .4rem;
  border-radius:12px;border:1px solid var(--line);background:var(--glass);
  font-size:.78rem;font-weight:700;color:var(--t2);
  transition:border-color .18s,background .18s,transform .18s}
.net:hover{border-color:var(--line-strong);background:var(--raised);color:var(--t1);transform:translateY(-2px)}
.copyrow{display:flex;gap:.5rem}
.copyrow input{flex:1;min-width:0;background:var(--raised);border:1px solid var(--line);
  color:var(--t2);border-radius:10px;padding:.72rem .85rem;font-family:var(--lt);font-size:.82rem;
  direction:ltr;text-align:left}
.copyrow button{padding:.72rem 1.3rem;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:800;font-size:.86rem;white-space:nowrap}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:120;
  background:var(--raised);border:1px solid var(--line-strong);color:var(--t1);
  padding:.7rem 1.35rem;border-radius:999px;font-size:.9rem;font-weight:700;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:940px){
  .hero{grid-template-columns:1fr;gap:2rem}
  .anchors{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== cast page ===== */
/* ── Bar ── */
.bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1.4rem;
  padding:.9rem clamp(1.2rem,4vw,3.4rem);flex-wrap:wrap;
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)}
/* .brand defined once above */
/* logo mark defined once above */
.bar .sp{flex:1}
.back{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:700;
  color:var(--t2);padding:.45rem .95rem;border-radius:999px;border:1px solid var(--line);
  background:var(--glass);transition:color .18s,border-color .18s,background .18s}
.back:hover{color:var(--t1);border-color:var(--line-strong);background:rgba(255,255,255,.12)}
.back svg{transform:scaleX(-1)}

/* ── Page head ── */
.head{position:relative;padding:clamp(3rem,8vw,6rem) 0 clamp(2rem,5vw,3.4rem);
  background-image:
    radial-gradient(760px 440px at 88% 0%, color-mix(in srgb,var(--glow-teal) 42%,transparent), transparent 70%),
    radial-gradient(620px 400px at 6% 30%, color-mix(in srgb,var(--glow-blue) 34%,transparent), transparent 72%);
  background-repeat:no-repeat}
.eyebrow{font-size:.9rem;font-weight:800;color:var(--teal);margin:0 0 .5rem}
.head h1{margin:0;font-weight:900;font-size:clamp(2.6rem,7vw,5rem);line-height:1.14;letter-spacing:0}
.head .sub{margin:.9rem 0 0;max-width:56ch;color:var(--t2);font-size:1.06rem;line-height:1.9}
.headnote{margin-top:1.4rem;display:inline-flex;gap:.6rem;align-items:flex-start;
  font-size:.86rem;line-height:1.6;color:#E7C79B;max-width:60ch;
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--gold) 26%,transparent);
  border-radius:10px;padding:.7rem .95rem}
.headnote b{color:var(--gold)}

/* ── Cast bands ── */
.band{position:relative;padding:clamp(2.6rem,6vw,4.6rem) 0;border-top:1px solid var(--line)}
.band__in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.6rem,4vw,3.6rem);align-items:center}
.band:nth-child(even) .band__in{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.band:nth-child(even) .por{order:2}
.band:nth-child(even) .info{order:1}

/* the accent glow bleeds off the page edge behind each portrait */
.band::before{content:"";position:absolute;top:12%;width:46vw;height:76%;
  background:radial-gradient(closest-side,var(--acc),transparent 72%);
  opacity:.16;pointer-events:none}
.band:nth-child(odd)::before{inset-inline-end:-14vw}
.band:nth-child(even)::before{inset-inline-start:-14vw}

.por{position:relative}
.por__img{position:relative;z-index:1;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-strong);aspect-ratio:4/5;
  box-shadow:0 34px 80px rgba(0,0,0,.66)}
.por__img img{width:100%;height:100%;object-fit:cover}
/* outlined running order, sitting behind the portrait like a title card */
.bandnum{position:absolute;z-index:0;top:-.42em;font-family:var(--lt);font-weight:900;
  font-size:clamp(6rem,15vw,12rem);line-height:1;color:transparent;
  -webkit-text-stroke:2px var(--line-strong);letter-spacing:-.04em;pointer-events:none}
.band:nth-child(odd) .bandnum{inset-inline-start:-.14em}
.band:nth-child(even) .bandnum{inset-inline-end:-.14em}

.info{position:relative;z-index:1}
.role{display:inline-flex;align-items:center;gap:.45rem;padding:.34rem .85rem;border-radius:999px;
  font-size:.84rem;font-weight:800;color:var(--acc);
  background:color-mix(in srgb,var(--acc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
.info h2{margin:.85rem 0 0;font-weight:900;font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.2}
.bio{margin:.9rem 0 0;max-width:54ch;color:#CFD7E0;font-size:1.04rem;line-height:1.95}
.facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.fact{display:inline-flex;align-items:center;gap:.4rem;padding:.36rem .8rem;border-radius:8px;
  font-size:.84rem;font-weight:600;color:var(--t2);
  background:var(--glass);border:1px solid var(--line)}
.fact b{color:var(--t1);font-weight:800}

.socials{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}
.soc{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);
  font-size:.86rem;font-weight:700;color:var(--t2);
  transition:color .18s,border-color .18s,background .18s,transform .18s}
.soc:hover{color:var(--t1);border-color:color-mix(in srgb,var(--acc) 55%,transparent);
  background:var(--raised);transform:translateY(-2px)}
.soc .h{font-family:var(--lt);font-size:.82rem;color:var(--t3)}
.soc:hover .h{color:var(--acc)}

footer{border-top:1px solid var(--line);margin-top:clamp(2rem,5vw,3rem);
  padding:2rem 0 3rem;color:var(--t3);font-size:.86rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:space-between;align-items:center}

@media (max-width:880px){
  .band__in,.band:nth-child(even) .band__in{grid-template-columns:1fr;gap:1.6rem}
  .band:nth-child(even) .por,.band:nth-child(even) .info{order:initial}
  .por__img{aspect-ratio:3/2}
  .bandnum{font-size:clamp(4.5rem,20vw,7rem)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== states the live data introduces that the mockups never hit ===== */

/* cast member with no photo uploaded yet */
.por__blank{width:100%;height:100%;display:grid;place-items:center}
.por__blank span{font-size:clamp(3rem,8vw,5.5rem);font-weight:900;color:rgba(255,255,255,.34);
  font-family:var(--ar)}
.av-initials{width:100%;height:100%;display:grid;place-items:center;
  background:var(--brand);color:#fff;font-weight:900;font-size:1.05rem}
.face .av{display:grid;place-items:center;background:var(--raised)}

/* the rail avatars are links on the live page */
.face{color:inherit;text-decoration:none}
footer a{color:var(--t2);transition:color .18s}
footer a:hover{color:var(--t1)}

/* a title with no artwork at all still needs a readable stage */
.stage{background:linear-gradient(160deg,var(--surface),var(--ink))}

/* The per-band accent glow is deliberately wider than the viewport and offset
   past the edge. Clip it at the band, or in RTL it creates a horizontal scroll. */
html,body{overflow-x:hidden;max-width:100%}
.band{overflow:hidden}