/* ============================================================
   PAKISTAN ANIME — base.css · NEO-BRUTALISM, DARK theme (default)
   Charcoal paper + grid, bold borders, hard offset shadows,
   flat bright colors. (neobrutalism.com style, dark skin)
   ============================================================ */

:root{
  /* dark paper + ink */
  --bg:#101014;
  --panel:#18181F;
  --panel-2:#1F1F28;
  --ink:#111111;            /* black — borders on BRIGHT surfaces */
  --line:#EFEDE2;           /* off-white — borders + hard shadows on DARK surfaces */
  --text:#F4F3EC;
  --muted:#A6A6B3;
  --dim:#8A8A99;            /* ≥4.5:1 on --bg — WCAG AA for the small texts that use it */

  /* flat palette */
  --violet:#A78BFA;
  --violet-deep:#8B5CF6;
  --lime:#C8F650;
  --yellow:#FFD43B;
  --pink:#FF8FC7;
  --cyan:#7DE8F0;
  --blue:#8FBDFF;
  --tg:#2AABEE;
  --danger:#FF6B6B;
  --ok:#3EDC81;

  /* brutal chrome */
  --bw:2.5px;
  --bw-lg:3px;
  --sh-sm:3px 3px 0 0 var(--line);
  --sh:4.5px 4.5px 0 0 var(--line);
  --sh-lg:7px 7px 0 0 var(--line);
  --sh-ink:3px 3px 0 0 var(--ink);   /* shadow for bright-colored elements */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;

  --ease:cubic-bezier(.22,.9,.3,1);
  --header-h:72px;

  color-scheme:dark;
}

/* light skin kept available for the future (html[data-theme="light"]) */
:root[data-theme="light"]{
  --bg:#FDFBF2; --panel:#FFFFFF; --panel-2:#FBF7EA;
  --line:#111111; --text:#111111; --muted:#4d4d4d; --dim:#6b6b6b;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
/* মোবাইল ট্যাপ-পলিশ: ট্যাপে ধূসর বক্স (tap-highlight), টেক্সট-সিলেকশন হ্যান্ডেল/toolbar
   আর লং-প্রেস মেনু — কিছুইই আসবে না; শুধু input-এ লেখা সিলেক্ট/কপি করা যাবে */
*{ -webkit-tap-highlight-color:transparent; }
html,body,.appRoot,#app{
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
input,textarea{ -webkit-user-select:text;user-select:text; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;
  overflow-x:clip;
  min-height:100vh;
  min-height:100dvh; /* মোবাইল ব্রাউজার-ক্রোমের পেছনে অতিরিক্ত ফাঁকা জায়গা নয় */
  -webkit-font-smoothing:antialiased;
}
/* graph-paper grid */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(239,237,226,.05) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(239,237,226,.05) 1.5px,transparent 1.5px);
  background-size:36px 36px;
}
:root[data-theme="light"] body::before{background-image:
  linear-gradient(rgba(17,17,17,.045) 1.5px,transparent 1.5px),
  linear-gradient(90deg,rgba(17,17,17,.045) 1.5px,transparent 1.5px)}
h1,h2,h3,h4{font-family:'Inter',sans-serif;margin:0;letter-spacing:-.03em;line-height:1.12;font-weight:800}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit}
svg{display:block}
::selection{background:var(--lime);color:var(--ink)}

*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:0;border:2px solid var(--bg)}
*::-webkit-scrollbar-track{background:transparent}

:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* ------------------------------------------------------------
   brutal panels + buttons + chips
   ------------------------------------------------------------ */
.glass,.glassStrong{
  background:var(--panel);
  border:var(--bw) solid var(--line);
  box-shadow:var(--sh);
}
.spec{position:relative}
.spec::before{display:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-md);
  font-family:'Inter',sans-serif;font-size:15px;font-weight:800;letter-spacing:-.01em;
  border:var(--bw) solid var(--line);cursor:pointer;user-select:none;
  background:var(--panel);color:var(--text);
  box-shadow:var(--sh);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--line)}
/* bright-colored buttons: black border, white hard shadow (dark theme) */
.btnGrad{background:var(--violet);color:var(--ink);border-color:var(--ink);box-shadow:var(--sh-ink)}
.btnGrad:hover{background:#B79EFF;box-shadow:5px 5px 0 0 var(--line)}
.btnGlass{background:var(--panel);color:var(--text)}
.btnGlass:hover{background:var(--panel-2)}
.btnDanger{background:var(--danger);color:var(--ink);border-color:var(--ink);box-shadow:var(--sh-ink)}
.btnDanger:hover{background:#FF8585;box-shadow:5px 5px 0 0 var(--line)}
.btnSm{padding:8px 15px;font-size:13.5px;border-radius:10px;box-shadow:var(--sh-sm)}
.btnSm:hover{box-shadow:5px 5px 0 0 var(--line)}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;
  font-family:'Space Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel);border:2px solid var(--line);color:var(--text);
  box-shadow:2px 2px 0 0 var(--line);
}
.chipGrad{background:var(--violet);border-color:var(--ink);color:var(--ink);text-transform:none;letter-spacing:.02em;font-size:11.5px}
.chipNew{background:var(--lime);border-color:var(--ink);color:var(--ink)}

.iconBtn{
  width:44px;height:44px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;
  background:var(--panel);border:var(--bw) solid var(--line);color:var(--text);
  box-shadow:var(--sh-sm);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);
}
.iconBtn svg{width:19px;height:19px}
.iconBtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--line);background:var(--yellow);color:var(--ink);border-color:var(--ink)}
.iconBtn:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--line)}


/* section heads — marker bar + chunky title */
.sectionHead{display:flex;align-items:center;gap:13px;margin:0 0 20px}
.sectionHead .bar{width:16px;height:30px;border-radius:6px;background:var(--violet);border:var(--bw) solid var(--ink);box-shadow:var(--sh-ink);flex:none}
.sectionHead h2{font-size:clamp(20px,2.6vw,27px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;color:var(--text)}
.sectionHead .seeAll{
  margin-left:auto;font-family:'Space Mono',monospace;font-size:12.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--yellow);color:var(--ink);
  box-shadow:2.5px 2.5px 0 0 var(--line);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.sectionHead .seeAll:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--line)}
.sectionHead .seeAll:active{transform:translate(2px,2px);box-shadow:0 0 0 0 var(--line)}
.sectionHead .seeAll svg{width:13px;height:13px}

/* reveal on scroll (kept) */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* maintenance mode screen */
body.maintOn .siteHeader,body.maintOn .siteFooter,body.maintOn .bottomNav{display:none!important}
body.maintOn .appRoot{padding-top:0}
.maintWrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.maintCard{
  max-width:520px;width:100%;text-align:center;
  background:var(--panel);border:var(--bw-lg) solid var(--ink);border-radius:var(--r-xl);
  box-shadow:12px 12px 0 0 var(--line);
  padding:clamp(30px,6vw,56px) 26px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.maintIcon{
  width:86px;height:86px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  font-size:42px;background:var(--yellow);border:var(--bw) solid var(--ink);
  box-shadow:var(--sh-ink);transform:rotate(-6deg);
}
.maintCard h1{font-family:'Archivo Black','Inter',sans-serif;font-weight:400;font-size:clamp(24px,5vw,34px);text-transform:uppercase;color:var(--text)}
.maintCard p{color:var(--muted);font-weight:600;font-size:14.5px}

/* পেজ ট্রানজিশন — রাউট বদলালে নতুন পেজ হালকা ফেড + উঠে আসে */
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pageIn{animation:pageIn .34s var(--ease) both}
html.lite .pageIn{animation:none}


/* ── CINEMATIC INTRO ("through the A") — markup index.html-এ, ড্রাইভার js/app.js-এ।
   হোম ডার্ক তাই ওভারলে হালকা (#F4F1FF), A থাকে #111। শুধু transform/opacity অ্যানিমেট হয়। ── */
.cinemaIntro{
  position:fixed;inset:0;z-index:9999;
  background:#000;                     /* user order: ইন্ট্রোর ব্যাকগ্রাউন্ড কালো */
  width:100vw;height:100vh;height:100dvh;
}
.ciSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ciSkip{
  position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:max(18px,env(safe-area-inset-bottom,0px));
  min-width:44px;min-height:44px;padding:10px 20px;
  border-radius:999px;border:1.5px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.10);color:#fff;
  font:600 14px 'Inter',sans-serif;cursor:pointer;
  opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:opacity .3s var(--ease, ease);
}
.ciSkip.on{opacity:1;pointer-events:auto}
.ciSkip:focus-visible{outline:3px solid #A78BFA;outline-offset:3px}
/* ইন্ট্রো চলাকালে স্ক্রল লক */
html.ciLock,html.ciLock body{overflow:hidden}
html.ciLock body{touch-action:none}
/* skip/শেষ-বিটের ৩৫০ms ক্রস-ফেড */
.cinemaIntro.ciFade{opacity:0;transition:opacity .35s ease}

/* ------------------------------------------------------------
   LITE MODE — same brutal look, no transitions
   ------------------------------------------------------------ */
html.lite .reveal{opacity:1;transform:none;transition:none}
html.lite .btn,html.lite .iconBtn,html.lite .chip,html.lite .card .posterWrap,
html.lite .sectionHead .seeAll,html.lite .serverPill,html.lite .epBtn,
html.lite .fChip,html.lite .alphaStrip button,html.lite .rowArrow{transition:none!important}
html.lite .card:hover .posterWrap{transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}