/* =====================================================================
   page-transition.css — উম্মাহ গাইডেন্স: অ্যাপে প্রবেশ ও বের হওয়ার স্মুথ ট্রানজিশন
   ---------------------------------------------------------------------
   দুই স্তরের সিস্টেম (page-transition.js এর সাথে একসাথে কাজ করে):

   ১) আধুনিক ব্রাউজার (Chrome/Edge/Safari 18.2+):
      Cross-document View Transitions — প্রবেশে নতুন পেজ ডান দিক থেকে
      হালকা স্লাইড+ফেড করে ঢোকে, বের হওয়ার সময় (হোমে ফেরা/ব্যাক) পেজটি
      ডান দিকে সরে যায় আর হোম পেজ হালকা জুম-ইন হয়ে ফিরে আসে।

   ২) পুরনো ব্রাউজার (Firefox ইত্যাদি):
      মসৃণ ফেড-আউট / ফেড-ইন (শুধু opacity — fixed navbar ভাঙে না)।

   সব ক্ষেত্রে: উপরে পাতলা প্রগ্রেস বার, এবং prefers-reduced-motion মানা হয়।
   ===================================================================== */

/* ---------- ১) Cross-document View Transitions (opt-in) ---------- */
@view-transition {
  navigation: auto;
}

:root {
  --ug-pt-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ug-pt-ease-in: cubic-bezier(.4, 0, 1, 1);
  --ug-pt-accent: #1f8a5f;
}

/* old/new কে plus-lighter ব্লেন্ড থেকে সরিয়ে স্বাভাবিক করা — স্লাইডের সময় ঝলক এড়াতে */
::view-transition-group(root) {
  animation-duration: .38s;
}
::view-transition-image-pair(root) {
  isolation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-fill-mode: both;
}

/* ===== সামনে যাওয়া (অ্যাপে প্রবেশ / এক অ্যাপ থেকে আরেক অ্যাপ) ===== */
html:not([data-ug-dir="back"])::view-transition-old(root) {
  animation: ug-pt-old-forward .30s var(--ug-pt-ease-in) both;
}
html:not([data-ug-dir="back"])::view-transition-new(root) {
  animation: ug-pt-new-forward .42s var(--ug-pt-ease-out) both;
}

/* ===== পেছনে যাওয়া (অ্যাপ থেকে বের হওয়া / ব্যাক) ===== */
html[data-ug-dir="back"]::view-transition-old(root) {
  animation: ug-pt-old-back .30s var(--ug-pt-ease-in) both;
  z-index: 2; /* বের হওয়া পেজ উপরে থেকে সরে যায় */
}
html[data-ug-dir="back"]::view-transition-new(root) {
  animation: ug-pt-new-back .42s var(--ug-pt-ease-out) both;
  z-index: 1;
}

@keyframes ug-pt-old-forward {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.97) translateX(-3%); }
}
@keyframes ug-pt-new-forward {
  from { opacity: 0; transform: translateX(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ug-pt-old-back {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateX(34px); }
}
@keyframes ug-pt-new-back {
  from { opacity: 0; transform: scale(1.035); }
  to   { opacity: 1; transform: none; }
}

/* ---------- ২) ফলব্যাক (View Transitions ছাড়া ব্রাউজার) ---------- */
/* শুধু opacity ব্যবহার — transform/filter দিলে position:fixed নেভবার ভেঙে যায় */
html.ug-pt-fallback.ug-pt-enter body {
  animation: ug-pt-fade-in .42s var(--ug-pt-ease-out) both;
}
html.ug-pt-fallback.ug-pt-leaving body {
  opacity: 0;
  transition: opacity .22s ease-in;
  pointer-events: none;
}
@keyframes ug-pt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- প্রগ্রেস বার (সব ব্রাউজারে) ---------- */
#ug-pt-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2147483000;
  pointer-events: none;
  background: var(--ug-pt-accent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  box-shadow: 0 0 8px var(--ug-pt-accent);
}
#ug-pt-bar.ug-pt-run {
  opacity: 1;
  animation: ug-pt-bar-run 6s cubic-bezier(.08, .8, .2, 1) forwards;
}
@keyframes ug-pt-bar-run {
  0%   { transform: scaleX(0); }
  15%  { transform: scaleX(.35); }
  60%  { transform: scaleX(.78); }
  100% { transform: scaleX(.94); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01s !important;
    animation-delay: 0s !important;
  }
  html.ug-pt-fallback.ug-pt-enter body,
  html.ug-pt-fallback.ug-pt-leaving body {
    animation: none;
    transition: none;
    opacity: 1;
  }
  #ug-pt-bar.ug-pt-run {
    animation-duration: .01s;
  }
}