/* =========================================================
   DARUCHINI — Premium motion enhancement layer
   Loaded after base.css/components.css and driven by
   assets/js/motion.js. Every rule here is additive: if a CDN
   library or the script fails to load, the site underneath
   renders exactly as it did before this file existed — no
   content is ever hidden by default.
   ========================================================= */

/* ---------- Grain / texture overlay ----------
   Kills the "flat, machine-generated" look with a whisper of
   film grain across every page. Pure decoration, ignored by
   assistive tech and pointer events. */
.grain-overlay{
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}
@media (prefers-reduced-motion: reduce){
  .grain-overlay{ display: none; }
}

/* ---------- Custom cursor: a small animated fork (fine pointers only) ---------- */
.cursor-fork{
  position: fixed;
  top: 0; left: 0;
  width: 24px; height: 30px;
  pointer-events: none;
  z-index: 350;
  opacity: 0;
  color: rgba(251, 242, 228, 0.95);
  filter: drop-shadow(0 3px 6px rgba(20, 12, 5, 0.5));
  will-change: transform;
  transition: opacity 200ms ease, color 260ms ease, width 260ms cubic-bezier(.22,.68,.16,1), height 260ms cubic-bezier(.22,.68,.16,1);
}
.cursor-fork svg{ width: 100%; height: 100%; display: block; }
.cursor-fork.is-hover{
  width: 32px; height: 40px;
  color: var(--turmeric, #D3A03C);
}
.cursor-fork.is-pop svg{ animation: cursorPop 420ms cubic-bezier(.34,1.56,.64,1); }
@keyframes cursorPop{
  0%{ transform: scale(1); }
  35%{ transform: scale(0.72, 1.28); }
  65%{ transform: scale(1.18, 0.85); }
  100%{ transform: scale(1); }
}
html.has-custom-cursor .cursor-fork{ opacity: 1; }
html.has-custom-cursor,
html.has-custom-cursor a,
html.has-custom-cursor button,
html.has-custom-cursor .nav-toggle{ cursor: none; }
@media (pointer: coarse){
  .cursor-fork{ display: none !important; }
  html.has-custom-cursor{ cursor: auto; }
  html.has-custom-cursor a, html.has-custom-cursor button{ cursor: pointer; }
}

/* ---------- Buttons: soft sheen + ripple ----------
   Layered on top of the existing .btn rules in base.css —
   nothing here removes or overrides the original background/
   color/hover-lift behaviour. Timing is intentionally slow and
   understated: a single quiet pass of light, not a flash. */
.btn{ position: relative; overflow: hidden; isolation: isolate; }
.btn::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-140%);
  transition: transform 1100ms cubic-bezier(.16,.8,.24,1);
  pointer-events: none;
}
.btn:hover::before{ transform: translateX(140%); }
.btn-ripple{
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  transform: scale(0);
  pointer-events: none;
  z-index: 0;
  animation: btnRipple 850ms cubic-bezier(.16,.8,.24,1) forwards;
}
@keyframes btnRipple{ to{ transform: scale(16); opacity: 0; } }
.btn > *{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){
  .btn::before{ display: none; }
  .btn-ripple{ display: none; }
}

/* ---------- Card / value tilt (3D) ---------- */
.card, .value-item{ will-change: transform; }
.stat b{ font-variant-numeric: tabular-nums; }

/* ---------- Hero "aurora" light drift ----------
   A slow, soft wash of warm gradient light behind hero banners,
   replacing any particle effect with something calmer: two large,
   low-opacity glows that drift on a very long, gentle loop. Pure
   CSS, no canvas, no JS dependency. */
.hero::after,
.page-hero::after,
.menu-hero::after{
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 45% at 20% 30%, rgba(211, 160, 60, 0.22), transparent 70%),
    radial-gradient(32% 40% at 82% 68%, rgba(168, 50, 38, 0.16), transparent 72%);
  background-repeat: no-repeat;
  animation: auroraDrift 26s ease-in-out infinite alternate;
}
.hero::after{ z-index: 2; }
@keyframes auroraDrift{
  0%{ transform: translate3d(-2%, -1%, 0) scale(1); opacity: .85; }
  50%{ transform: translate3d(3%, 2%, 0) scale(1.08); opacity: 1; }
  100%{ transform: translate3d(-1%, 3%, 0) scale(1.02); opacity: .9; }
}
@media (prefers-reduced-motion: reduce){
  .hero::after, .page-hero::after, .menu-hero::after{ display: none; }
}

/* ---------- Header: premium glass finish ----------
   Additional polish on top of components.css: a soft blur so the
   header reads as a considered surface rather than a flat bar,
   even before the scroll state kicks in. */
.site-header{
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
}
.site-header.is-scrolled{
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(211, 160, 60, 0.14);
}

/* ---------- Footer: quiet decorative touches + link hovers ---------- */
.site-footer{ position: relative; overflow: hidden; }
.site-footer::before{
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(211,160,60,.35), transparent);
}
.site-footer h4{ position: relative; }
/* NOTE: deliberately no `display` change here — the data-en/data-bn
   language-toggle rule ([data-bn]{display:none}) targets these same
   <a> tags directly, and a more specific display override on this
   selector would beat it and show both languages at once. */
.site-footer ul li a{
  position: relative;
  transition: color 320ms ease;
}
.site-footer ul li a::after{
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--turmeric, #D3A03C);
  transition: width 380ms cubic-bezier(.22,.68,.16,1);
}
.site-footer ul li a:hover::after{ width: 100%; }
.social-row a{ transition: background 320ms cubic-bezier(.22,.68,.16,1), border-color 320ms cubic-bezier(.22,.68,.16,1), transform 320ms cubic-bezier(.22,.68,.16,1); }
.social-row a:hover{ transform: translateY(-3px); }

/* ---------- FAQ: height-animation support ----------
   Colours, borders and the open/closed background live in
   components.css (.faq-section) since this is a themed dark
   section, not a generic overlay effect. This just adds the
   overflow clip the JS height tween needs, plus a hover tint. */
.faq-a{ overflow: hidden; }
.faq-q:hover{ color: var(--white); }
.faq-q:hover .plus{ border-color: var(--white); }

/* ---------- Image hover: consistent, gentle zoom everywhere ---------- */
.img-frame{ overflow: hidden; border-radius: var(--radius-lg, 22px); }
.img-frame img{ transition: transform 900ms cubic-bezier(.16,.8,.24,1); }
.img-frame:hover img{ transform: scale(1.045); }

/* ---------- "Find us on Google Maps" card: pin ping + reveal label ---------- */
.map-frame{ position: relative; }
.map-frame a{ position: relative; display: block; overflow: hidden; }
.map-frame img{ transition: transform 900ms cubic-bezier(.16,.8,.24,1), filter 500ms ease; }
.map-frame a:hover img{ transform: scale(1.07); filter: saturate(1.12); }
.map-frame a::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,5,0) 45%, rgba(20,12,5,.6) 100%);
  opacity: 0;
  transition: opacity 420ms ease;
}
.map-frame a:hover::before{ opacity: 1; }
.map-label{
  position: absolute; left: 50%; bottom: 1.2rem;
  transform: translate(-50%, 10px);
  color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  padding: .6em 1.3em; border-radius: 999px;
  background: rgba(20,12,5,.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.68,.16,1);
  z-index: 2;
}
html[lang="bn"] .map-label{ font-family: var(--font-bn-body); }
.map-frame a:hover .map-label,
.map-frame a:focus-visible .map-label{ opacity: 1; transform: translate(-50%, 0); }
.map-pin{
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -100%);
  width: 40px; height: 40px;
  pointer-events: none;
  z-index: 1;
}
.map-pin svg{
  width: 100%; height: 100%;
  color: var(--chili, #A83226);
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.4));
  animation: mapPinBob 2.6s ease-in-out infinite;
}
.map-pin::after{
  content: "";
  position: absolute; left: 50%; bottom: -3px;
  transform: translate(-50%, 0);
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(168,50,38,.4);
  animation: mapPing 2.6s ease-out infinite;
}
@keyframes mapPinBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
@keyframes mapPing{
  0%{ transform: translate(-50%,0) scale(0.6); opacity: .9; }
  80%{ transform: translate(-50%,0) scale(2.4); opacity: 0; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .map-pin svg, .map-pin::after{ animation: none; }
}

/* ---------- Gallery: original uniform grid, richer hover only ----------
   Layout (columns/aspect ratio) is unchanged from the site's original
   design — only the hover state, caption and lightbox got the
   enhancement pass. */
.full-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}
.full-gallery button{
  position: relative;
  padding: 0; margin: 0; border: 0; background: none;
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
  aspect-ratio: 1;
  cursor: zoom-in;
  display: block;
}
.full-gallery img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 900ms cubic-bezier(.16,.8,.24,1);
}
.full-gallery button::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20,12,5,.8) 0%, rgba(20,12,5,0) 55%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 14px) 14px;
  background-size: 100% 100%, 18px 18px;
  opacity: 0;
  transition: opacity 420ms ease;
}
.full-gallery button::after{
  content: attr(data-cap-en);
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem .9rem .8rem;
  font-size: .82rem; font-weight: 600; color: #fff; letter-spacing: .01em;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.68,.16,1);
}
html[lang="bn"] .full-gallery button::after{
  content: attr(data-cap-bn);
  font-family: var(--font-bn-body);
}
.full-gallery button:hover::before,
.full-gallery button:focus-visible::before{ opacity: 1; }
.full-gallery button:hover::after,
.full-gallery button:focus-visible::after{ opacity: 1; transform: translateY(0); }
.full-gallery button:hover img,
.full-gallery button:focus-visible img{ transform: scale(1.07); }

@media (max-width: 700px){
  .full-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce){
  .full-gallery img{ transition: none; }
}

/* ---------- Lightbox ----------
   Full structural definition lives here (gallery.html no longer
   carries its own <style> block for this), plus a soft fade+scale
   transition and previous/next navigation. */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(15, 9, 4, 0.92);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.22,.68,.16,1), visibility 420ms;
}
.lightbox.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.lightbox img{
  max-width: min(94vw, 1100px);
  max-height: 88vh;
  border-radius: 10px;
  display: block;
  transform: scale(.96);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  transition: transform 420ms cubic-bezier(.22,.68,.16,1);
}
.lightbox.open img{ transform: scale(1); }
.lightbox figcaption{
  position: absolute;
  left: 0; right: 0; bottom: 1.4rem;
  text-align: center;
  color: rgba(255,255,255,.85);
  font-size: .88rem;
  padding-inline: 4rem;
}
.lightbox button{
  background: none;
  border: 2px solid rgba(255,255,255,.7);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 260ms ease, border-color 260ms ease, transform 260ms cubic-bezier(.22,.68,.16,1);
}
.lightbox button:hover{ background: rgba(255,255,255,.15); border-color: #fff; }
.lightbox .lb-close{
  position: absolute; top: 1.5rem; right: 1.5rem;
  width: 44px; height: 44px; font-size: 1.3rem;
}
.lightbox .lb-close:hover{ transform: rotate(90deg); }
.lightbox .lb-prev,
.lightbox .lb-next{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
}
.lightbox .lb-prev{ left: 1.5rem; }
.lightbox .lb-next{ right: 1.5rem; }
.lightbox .lb-prev svg,
.lightbox .lb-next svg{ width: 22px; height: 22px; }
.lightbox .lb-prev:hover{ transform: translateY(-50%) translateX(-2px); }
.lightbox .lb-next:hover{ transform: translateY(-50%) translateX(2px); }
@media (max-width: 640px){
  .lightbox .lb-prev, .lightbox .lb-next{ width: 40px; height: 40px; }
  .lightbox .lb-close{ width: 38px; height: 38px; top: 1rem; right: 1rem; }
  .lightbox figcaption{ padding-inline: 1rem; bottom: .8rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox img, .lightbox button{ transition: none; }
}