/* হোম পাতার মাথায় ফিল্ম (২০২৬-১০-২৬) — manthanbd.com/motion-এর ফিল্মটাই, মালিকের কথায়
   হোম পাতার হিরোতে ("same page header e motion ta rakho")। টেবিল-ল্যাম্পের আলোয় ডেস্ক →
   প্রিন্টার থেকে কাগজ বেরোয় → সেই কাগজ উঠে এসে সামনে দাঁড়ায়, লাইনগুলো ভরে, “মন্থনে তৈরি”
   সিল পড়ে, নিচে PDF / Word / সরাসরি প্রিন্ট।
   চালায় js/home/film.js (ফাইলের মাথায় পুরো ব্যাখ্যা)। এখানে শুধু নকশা।
   🔴 সব ক্লাস `mtf-` দিয়ে শুরু — index.html-এ হাজার হাজার লাইনের CSS, সাধারণ নাম
      (`.sheet`, `.copy`, `.q`) কোথাও না কোথাও লেগে যায়।
   🔴 ভিডিও আর পোস্টার দুটোই CSS-এর object-fit/object-position-এ বসে — film.js একই হিসেবে
      কাগজটাকে ভিডিওর ট্রের ওপর বসায়। object-position বদলালে film.js-এর FOCUS-ও বদলান। */

.mtf{position:relative;overflow:hidden;background:#06150F;color:#F1F7F4;
  height:calc(100vh - var(--mtf-top,64px));height:calc(100svh - var(--mtf-top,64px) - var(--mtf-bot,0px));min-height:540px;max-height:980px;
  --veil:rgba(6,21,15,.9);--hair:rgba(127,217,192,.18);--mint:#7FD9C0;--accent:#1E9E75;--ink:#18263F;--g:#0F6E56;
  --left:max(20px,5vw);font-family:'Hind Siliguri',system-ui,sans-serif}
/* index.html-এর নিচের ধাপে ঢালু কিনারা — আগের হিরোরই, যাতে পরের অংশে মসৃণ নামে */
.mtf-film{position:absolute;inset:0;transform-origin:70% 45%;will-change:transform}
.mtf-poster,.mtf-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:93% 55%}
.mtf-video{opacity:0;transition:opacity .3s}
.mtf-video.is-on{opacity:1}
.mtf-veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--veil) 0%,rgba(6,21,15,.63) 34%,transparent 62%),
  linear-gradient(0deg,var(--veil) 0%,transparent 28%),
  linear-gradient(180deg,rgba(6,21,15,.72) 0%,transparent 18%)}
.mtf-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 95% at 60% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.mtf-grain{position:absolute;inset:-60%;pointer-events:none;opacity:.07;mix-blend-mode:overlay;animation:mtf-grain .9s steps(5) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes mtf-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}}

/* বাঁ দিকের লেখা — স্ক্রিপ্ট ছাড়াই CSS-এ ওঠে, তাই ভিডিও আসার আগেই পড়া যায় */
.mtf-copy{position:absolute;z-index:5;left:var(--left);top:50%;transform:translateY(-50%);width:min(680px,50vw)}
.mtf-chip{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:#A6BFB4;padding:7px 14px 7px 10px;border-radius:99px;
  background:rgba(6,21,15,.55);border:1px solid var(--hair);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mtf-chip i{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.22)}
.mtf-h{font-family:'Noto Serif Bengali',serif;font-weight:800;font-size:clamp(34px,3.6vw,56px);line-height:1.25;letter-spacing:.2px;margin:22px 0 26px;color:#F1F7F4}
.mtf-line{display:block;white-space:nowrap}
.mtf-line.hl{color:var(--mint)}
.mtf-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .04em .22em;margin:0 -.04em -.16em}
.mtf-w>span{display:inline-block;animation:mtf-word 1.25s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
@keyframes mtf-word{from{transform:translateY(140%);filter:blur(10px)}}
.mtf-rise{animation:mtf-rise 1s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
@keyframes mtf-rise{from{opacity:0;transform:translateY(22px);filter:blur(6px)}}
.mtf-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.mtf-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:14px;border:0;cursor:pointer;
  font:600 16px/1.2 'Hind Siliguri',system-ui,sans-serif;color:#fff;background:var(--accent);text-decoration:none;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 12px 34px -10px var(--accent);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mtf-btn::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.mtf-btn:hover{transform:translateY(-2px)}
.mtf-btn:hover::after{transform:translateX(120%) skewX(-20deg);transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.mtf-btn svg{width:18px;height:18px;transition:transform .35s}
.mtf-btn:hover svg{transform:translateX(3px)}
.mtf-ghost{color:#F1F7F4;background:rgba(6,21,15,.45);border:1px solid var(--hair);box-shadow:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.mtf-ghost:hover{border-color:#A6BFB4}
.mtf-trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:26px 0 0;padding:0;list-style:none;font-size:14px;color:#A6BFB4}
.mtf-trust li{display:inline-flex;align-items:center;gap:7px}
.mtf-trust li::before{content:"";width:16px;height:16px;border-radius:50%;background:rgba(34,197,94,.22)
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat}

/* ছাপা কাগজ: প্রিন্টারের ট্রেতে শুরু, তারপর উঠে এসে সামনে দাঁড়ায় (matrix3d — film.js) */
.mtf-float{position:absolute;inset:0;pointer-events:none}
.mtf-sheet{position:absolute;left:0;top:0;width:480px;height:679px;transform-origin:0 0;opacity:0;visibility:hidden;box-sizing:border-box;
  background:linear-gradient(180deg,#FFFEFA,#FBF8EF);color:var(--ink);padding:40px;font-family:'Noto Serif Bengali',serif;text-align:left;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.04);backface-visibility:hidden}
.mtf-ln{opacity:0;visibility:hidden}
.mtf-school{text-align:center;font-size:27px;font-weight:700}
.mtf-exam{text-align:center;font-size:18px;margin-top:4px}
.mtf-meta{display:flex;justify-content:space-between;font-size:14.5px;margin-top:14px;padding:9px 0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.mtf-sec{text-align:center;font-size:16px;font-weight:700;margin:22px 0 12px}
.mtf-q{font-size:16.5px;line-height:1.7;margin-bottom:14px}
.mtf-q .opts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:2px 24px;padding-left:22px;font-size:16px}
.mtf-q .mk{float:right;font-weight:700}
.mtf-fr{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;font-size:.78em;line-height:1.05;margin:0 1px}
.mtf-fr i{font-style:normal;padding:0 2px}
.mtf-fr i:first-child{border-bottom:1px solid currentColor}
.mtf-foot{position:absolute;left:40px;right:40px;bottom:22px;display:flex;justify-content:space-between;align-items:center;font:500 12px 'Hind Siliguri',sans-serif;color:#66766E}
.mtf-foot img{width:18px;height:18px;vertical-align:-4px;margin-right:5px}
.mtf-stamp{position:absolute;right:34px;bottom:54px;width:96px;height:96px;border-radius:50%;border:2.5px solid var(--g);color:var(--g);
  display:grid;place-content:center;text-align:center;font:700 13px/1.35 'Hind Siliguri',sans-serif;transform:rotate(-12deg);opacity:0;visibility:hidden}
.mtf-stamp::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed var(--g);opacity:.6}
.mtf-ex{position:absolute;top:12px;right:14px;font:500 11px 'Hind Siliguri',sans-serif;color:#9AA7A1;border:1px solid #DFE7E3;border-radius:99px;padding:1px 9px}
.mtf-actions{position:absolute;left:0;top:0;display:flex;gap:6px;padding:6px;border-radius:16px;white-space:nowrap;
  background:rgba(6,21,15,.82);border:1px solid var(--hair);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden}
.mtf-actions span{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:11px;font:600 15px 'Hind Siliguri',sans-serif;color:#A6BFB4}
.mtf-actions span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.mtf-actions .go{color:#fff;background:var(--accent)}
.mtf-actions .go::before{background:#fff}

/* আবার দেখুন + শব্দের সুইচ। নিচে স্ক্রল করলে সুইচ লুকায় — শব্দ চালু থাকলে শুধু ছোট আইকন হয়ে
   ওপরে থাকে, যাতে বন্ধ করা যায় */
.mtf-replay,.mtf-sound{position:absolute;z-index:6;bottom:24px;display:inline-flex;align-items:center;border-radius:99px;cursor:pointer;min-height:44px;min-width:44px;justify-content:center;
  font-family:'Hind Siliguri',system-ui,sans-serif;background:rgba(6,21,15,.6);border:1px solid var(--hair);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.mtf-replay{right:var(--left);gap:8px;padding:9px 14px;font-size:14px;color:#A6BFB4;opacity:0;visibility:hidden}
.mtf-replay:hover{color:#F1F7F4}
.mtf-replay svg{width:14px;height:14px}
.mtf-sound{left:var(--left);gap:10px;padding:10px 16px 10px 13px;font-size:14px;font-weight:600;color:#F1F7F4}
.mtf-sound[hidden]{display:none}
.mtf-sound::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1.5px solid var(--mint);animation:mtf-ring 2.2s ease-out infinite;pointer-events:none}
.mtf-sound.on::after{display:none}
.mtf-sound.past{display:none}
.mtf-sound.past.on{display:inline-flex;position:fixed;z-index:61;top:calc(var(--mtf-top,64px) + 10px);bottom:auto;left:auto;right:16px;padding:10px}
.mtf-sound.past .lbl{display:none}
.mtf-sound .eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.mtf-sound .eq i{width:3px;height:5px;border-radius:2px;background:var(--mint)}
.mtf-sound.on .eq i{animation:mtf-eq .9s ease-in-out infinite}
.mtf-sound.on .eq i:nth-child(2){animation-delay:-.3s}.mtf-sound.on .eq i:nth-child(3){animation-delay:-.6s}.mtf-sound.on .eq i:nth-child(4){animation-delay:-.15s}
@keyframes mtf-eq{0%,100%{height:4px}50%{height:14px}}
@keyframes mtf-ring{from{opacity:.75;transform:scale(.97)}to{opacity:0;transform:scale(1.14)}}

/* ফিল্মের নিচের অংশ (আগের হিরো, এখন চলন্ত ফোনের ঘর): ফোনে ফিল্ম যা লুকায়, তা এখানে দেখায় */
.lp-hero .mxd-h{font-size:clamp(26px,3vw,38px) !important}
.lp-hero .mxd-phone{display:none}

@media (max-width:768px){
  .mtf-poster,.mtf-video{object-position:79% 60%}
  .mtf-veil{background:linear-gradient(180deg,var(--veil) 0%,rgba(6,21,15,.63) 20%,transparent 38%,transparent 72%,var(--veil) 94%)}
  .mtf-copy{left:16px;right:16px;top:16px;bottom:18px;width:auto;transform:none;pointer-events:none}
  .mtf-copy a,.mtf-copy button{pointer-events:auto}
  .mtf-chip,.mtf-trust,.mtf-cta .mtf-ghost{display:none}
  .mtf-h{font-size:27px;margin:0}
  .mtf-line{white-space:normal}
  .mtf-cta{position:absolute;left:0;right:0;bottom:0}
  .mtf-cta .mtf-btn{flex:1;justify-content:center}
  .mtf-actions span{padding:8px 11px;font-size:13px}
  .mtf-sound{left:16px;bottom:84px;font-size:14px;padding:8px 13px 8px 11px}
  .mtf-replay{right:16px;bottom:84px;padding:7px 10px}
  .mtf-replay span{display:none}
  .lp-hero .lp-hero-trust.mxd-phone{display:flex}
}
@media (prefers-reduced-motion:reduce){.mtf-w>span,.mtf-rise,.mtf-grain,.mtf-sound::after{animation:none}}