/* ==========================================================================
   Base & Smooth Scroll Setup
   ========================================================================== */
html {
  scroll-behavior: auto !important;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* ==========================================================================
   Section & Overflow Rules (Prevent 3D Clipping)
   ========================================================================== */
.elementor-element-50bb9c2,
.elementor-element-ddc0d86,
.image_scroll_anim_div,
.image_scroll_anim_div .e-con-inner,
.image_scroll_anim_div .e-con-child {
  overflow: visible !important;
}

/* ==========================================================================
   Scrollable Avatar (Sticky at Window Bottom & Single 3D Flip) - Desktop Only
   ========================================================================== */
@media (min-width: 1025px) {
  /* Image is ALWAYS position:fixed — avatar--sticky class applies throughout */
  body:not(.elementor-editor-active) .scrollabe_img_ims,
  body:not(.elementor-editor-active) .scrollabe_img_ims.avatar--sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 99 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 220px !important;
    height: 280px !important;
    perspective: 1400px;
    will-change: transform;
    pointer-events: none;
    transition: none !important; /* Disable all CSS transitions so GSAP has 100% instantaneous control */
    animation: none !important;  /* Disable any conflicting Elementor starter animations */
    opacity: 0; /* Hidden until GSAP calculates exact initial position */
  }

  body:not(.elementor-editor-active) .scrollabe_img_ims.avatar--ready {
    opacity: 1 !important;
  }

  body:not(.elementor-editor-active) .scrollabe_img_ims *,
  body:not(.elementor-editor-active) .scrollabe_img_ims .flip-card-inner {
    transition: none !important; /* Prevent any nested transition from fighting GSAP */
    animation: none !important;
  }

  body:not(.elementor-editor-active)
    .scrollabe_img_ims
    .elementor-widget-container {
    perspective: 1400px;
    position: relative;
    display: block;
    pointer-events: auto;
    margin: 0;
    padding: 0;
    width: 220px;
    height: 280px;
  }
}

body:not(.elementor-editor-active) .scrollabe_img_ims,
body:not(.elementor-editor-active) .scrollabe_img_ims .elementor-widget-container,
.scrollabe_img_ims,
.scrollabe_img_ims .elementor-widget-container,
.elementor-element-f39381b,
.elementor-element-f39381b .elementor-widget-container,
.elementor-element-3f13ab7,
.elementor-element-3f13ab7 .elementor-widget-container {
  border-radius: 20px !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

body:not(.elementor-editor-active) .scrollabe_img_ims img,
.scrollabe_img_ims img,
.elementor-element-f39381b img,
.elementor-element-3f13ab7 img {
  border-radius: 20px !important;
  box-shadow: none !important;
}

/* The 3D flip card inner that rotates 180deg */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 20px !important;
  box-shadow: none !important;
  background: transparent !important;
}

.flip-card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px !important;
  overflow: hidden;
  background: transparent !important;
}

/* Front Face: Black & White */
.flip-card-front {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  filter: grayscale(100%);
  z-index: 2;
  border-radius: 20px !important;
  overflow: hidden;
  background: transparent !important;
}

.flip-card-front img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

/* Back Face: Full Color, pre-rotated 180deg so at 180deg card flip it is upright */
.flip-card-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
  filter: grayscale(0%);
  z-index: 1;
  border-radius: 20px !important;
  overflow: hidden;
  background: transparent !important;
}

.flip-card-back img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  object-fit: cover !important;
  box-shadow: none !important;
}

/* Landing Slot inside Section 1 (#image_animation_flib_end / .avatar-landing-slot) */
#image_animation_flib_end,
#image_animation_flip_end,
.avatar-landing-slot {
  flex: 0 0 380px;
  width: 380px;
  max-width: 100%;
  height: 420px;
  min-height: 380px;
  visibility: hidden;
  pointer-events: none;
  order: 1; /* Sits between column 1 and column 2 */
  /* Must be position:relative so the docked image (position:absolute) is contained */
  position: relative !important;
  overflow: visible !important;
}

/* Layout alignment for the Hey! section (.image_scroll_anim_div) */
.image_scroll_anim_div .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
}

.image_scroll_anim_div .elementor-element-db5ad15 {
  order: 0;
  flex: 1 1 0;
}

.image_scroll_anim_div .elementor-element-404c72a {
  order: 2;
  flex: 1 1 0;
}

@media (max-width: 1024px) {
  body .scrollabe_img_ims,
  body .scrollabe_img_ims.avatar--sticky,
  body .scrollabe_img_ims.avatar--ready,
  .scrollabe_img_ims,
  #image_animation_flib_end,
  #image_animation_flip_end,
  .avatar-landing-slot {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .image_scroll_anim_div .e-con-inner {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .image_scroll_anim_div .elementor-element-db5ad15 {
    order: 0;
    width: 100%;
  }

  .image_scroll_anim_div .elementor-element-404c72a {
    order: 2;
    width: 100%;
  }
}

/* ==========================================================================
   Draggable Items (Stars / Lightning Sparkles)
   ========================================================================== */
.img_dragable_img {
  cursor: grab !important;
  user-select: none !important;
  touch-action: none !important;
  will-change: transform;
  z-index: 40;
}

.img_dragable_img:active {
  cursor: grabbing !important;
}

/* ---------- Avatar sticky/docked (স্ক্রল ফ্লিপ অ্যানিমেশনের জন্য must - Desktop Only) ---------- */
@media (min-width: 1025px) {
  .avatar--sticky {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 40;
    pointer-events: none;
  }
  .avatar--docked {
    position: relative !important;
  }
}

/* ---------- 3D flip card ---------- */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 20px !important;
  overflow: hidden;
  box-shadow: none !important;
}
.flip-card-face img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.flip-card-front img {
  filter: grayscale(1) contrast(1.05);
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* landing slot — placeholder জায়গা যেখানে ছবি গিয়ে docked হবে */
.avatar-landing-slot {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 220 / 280;
  position: relative;
}

/* ---------- Gradient color-reveal text ---------- */
/*
 * Each split line gets a two-stop gradient (dark | muted) at 200% width.
 * GSAP animates backgroundPositionX from 100% → 0% on scroll, revealing
 * the dark color from left to right as the user scrolls past the line.
 *
 * Strong specificity needed to override Elementor heading inline styles.
 */

/* ---------- Word-by-word color reveal text (.color_anim_text / #color_anim_text) ---------- */
/*
 * Supports both class (.color_anim_text) and ID (#color_anim_text).
 * Each word (.split-word) starts in muted light grey (#c5c5c5).
 * GSAP animates words sequentially to dark black (#111111) one by one on scroll.
 */

/* Pinned section layout: perfectly center the text vertically on all screen sizes */
.elementor-element-4c93fb3 .e-con-inner,
.elementor-element-4c93fb3.image_scroll_anim_div .e-con-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  height: 100% !important;
}

#color_anim_text,
.color_anim_text,
#color_anim_text .elementor-widget-container,
.color_anim_text .elementor-widget-container,
#color_anim_text .elementor-heading-title,
.color_anim_text .elementor-heading-title,
.elementor-element-fed240c {
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: none !important;
  transition: none !important;
}

#color_anim_text .split-word,
.color_anim_text .split-word {
  display: inline-block;
  color: #c5c5c5;
  will-change: color;
  transition: none !important;
  animation: none !important;
}

/* Stacked curtain layout: Section 3 stays pinned behind while the bottom section scrolls up over it */
.elementor-element-4c93fb3 {
  z-index: 1 !important;
  background-color: #FAF7F3 !important;
}

.pin-spacer:has(.elementor-element-4c93fb3) {
  height: calc(100vh + 1000px) !important;
  padding-bottom: 1000px !important;
  z-index: 1 !important;
}

/* Preceding section (Hey!) and all following sections (Services, Projects, etc.) must sit above Section 3 with solid background */
.elementor-element-c29896a,
.elementor-element-a54f4e8,
.elementor-element-e5ac8a0,
.elementor-element-24ee229,
.elementor-element-d242fe8,
.elementor-element-6a6a561 {
  position: relative !important;
  z-index: 10 !important;
  background-color: #FAF7F3 !important;
}

/* elementor css */
.custom_flib_box {
    position: relative;
    perspective: 1200px;
    overflow: visible;
    border-radius: 12px;
}

.custom_flib_box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #111111;
    background-image: url('http://majd.test/wp-content/uploads/2026/09/MG7SSqT3AUbDDMeyGynYFWvAWI.avif');
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: center;
    border-radius: 12px;
    z-index: 10;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: center;
    animation: flibReveal 1s cubic-bezier(0.4, 0.2, 0.2, 1) forwards;
    animation-delay: 1s;
}

@keyframes flibReveal {
    0% {
        transform: rotateY(0deg);
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        transform: rotateY(180deg);
        opacity: 0;
        pointer-events: none;
    }
}