/* ════════════════════════════════════════════════════════════════════════════
   THREE-DOT DROPDOWN ANIMATION FIX (BS-paralel)
   File ownership: agent (animation extraction). DOKUNMA başka agent.
   Source: m.bahissende301.com getAnimations() + getKeyframes() (2026-04-27)

   ROOT CAUSE (debugged 2026-04-27):
   The closed-state rule body.mobile-site .mobileHeader-smartPanel
   .hdr-smart-panel-holder-arrow-bc (specificity 0,3,1) sets
     transform: translateY(-11px); opacity:0; visibility:hidden
   The open-state rule with .is-open / .smart-panel-is-visible (spec 0,4,1)
   should win — but doesn't (browser cascade observed staying at -11px,
   opacity:0 even with is-open + smart-panel-is-visible active).
   Likely cause: the BS theme JS may be removing classes before paint or
   header.min.css (which contains .hdr-smart-panel-holder-arrow-bc with
   plain transform:translateX(-50%)) competes in some media query branch.

   FIX:
   1. Bump open-state specificity to (0,5,2) with extra body+html prefix
   2. Use !important on the trio (opacity, transform, visibility) since
      the cascade is fragile across header.min.css + theme-robinbet +
      three-dot-menu.css.
   3. Match BS animation timing EXACT: 0.24s ease (BS getAnimations duration)
      with backwards fill (BS effect.getTiming().fill='backwards').
   4. Match BS transform delta: BS uses translateY(-4%) which on its 280px
      height = -11.2px. MR height ~293px → -4% = -11.72px. Use -4% for
      consistency with BS's percentage-based unit (handles future height
      changes gracefully).

   BS getAnimations data captured:
     duration: 240
     easing:   "ease"
     delay:    0
     fill:     "backwards"
     iters:    1
     keyframes: [opacity 0→1, transform translateY(-4%)→translateY(0px)]

   This file MUST load AFTER three-dot-menu.css (loaded later in head.php
   so cascade source-order winning is guaranteed).
   ════════════════════════════════════════════════════════════════════════════ */

/* 1. CLOSED STATE (idle) — BS-paralel timing
   Specificity bumped (0,4,1) to win over header.min.css (.hdr-smart-panel-holder-arrow-bc)
   BS uses translateY(-4%) for percentage-based animation (responsive to height).
   MR keeps -11px (matches BS pixel-equivalent at 280px height). */
html.mobile-root body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4%) !important;
  transition:
    opacity 0.24s ease,
    visibility 0.24s ease,
    transform 0.24s ease !important;
  pointer-events: none !important;
  /* BS-paralel: animation start point, fill='backwards' equivalent.
     CSS transitions naturally use 'backwards' fill via the transition-property
     resolver — at t=0 the start value applies (matches BS effect timing). */
}

/* 2. OPEN STATE — when body has .smart-panel-is-visible OR .is-open on holder/parent
   Specificity (0,5,2): html.mobile-root body.mobile-site.<state>
   .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc<.optional-class>
   This guarantees winning over the closed-state rule above (0,4,1) AND
   any conflicting header.min.css default. !important added on the trio
   so cascade fragility doesn't break the open transition. */
/* 2026-05-23: parent-agnostic selectors. header.js line 428 moves holder to body
 * (document.body.appendChild) which breaks .mobileHeader-smartPanel ancestor selectors. */
html.mobile-root body.mobile-site.smart-panel-is-visible .hdr-smart-panel-holder-arrow-bc,
html.mobile-root body.mobile-site .hdr-smart-panel-holder-arrow-bc.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* 3. TOGGLE BUTTON ROTATION (BS-paralel: 180ms ease)
   BS getAnimations data: duration:180, easing:'ease' for .hdr-toggle-button-bc
   transform rotate(0deg) → rotate(90deg). Match exactly. */
html.mobile-root body.mobile-site .hdr-toggle-button-bc {
  transition: transform 0.18s ease, color 0.18s ease !important;
}

html.mobile-root body.mobile-site .hdr-toggle-button-bc.is-open {
  transform: rotate(0deg) !important;  /* BS: stays at 0deg, only color changes */
}

/* 4. PANEL INNER (children) — match BS button transition (0.18s ease)
   BS sp-button-bc transitions don't include transform; only color/background.
   This file does NOT override sp-button-bc (handled by three-dot-menu.css). */

/* 5. REDUCED MOTION SUPPORT (rule §22 + WCAG 2.3.3)
   BS implements prefers-reduced-motion gracefully — disable transform,
   keep opacity for visibility transition. */
@media (prefers-reduced-motion: reduce) {
  html.mobile-root body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc {
    transition: opacity 0.01s linear, visibility 0.01s linear !important;
    transform: translateY(0) !important;
  }
  html.mobile-root body.mobile-site .hdr-toggle-button-bc {
    transition: color 0.01s linear !important;
  }
}

/* 6. WILL-CHANGE HINT (perf optimization, BS doesn't use it but improves
   composite layer promotion on the panel during animation) */
html.mobile-root body.mobile-site .mobileHeader-smartPanel .hdr-smart-panel-holder-arrow-bc {
  will-change: opacity, transform;
}