/**
 * IES Overwatch Competitive Platform
 * Bilingual Interactive Hover System (Arabic RTL & English LTR)
 *
 * Provides responsive, tactile, accessible hover and focus feedback
 * across all interactive controls in the system.
 */

/* ==========================================================================
   1. Shared Base Interactive Foundations
   ========================================================================== */

/* Universal smooth hover transitions for interactive elements */
.blz-nav-link,
.brand,
.blz-lang-btn,
.a11y-trigger,
.blz-mobile-toggle,
.blz-drawer-link,
.blz-btn-play,
.btn,
.ghost,
.sf-links a,
.sf-link-btn,
.sf-channel,
.lp-about-card,
.lp-stage-card,
.lp-role-card,
.sh-pill,
.seg button,
.chips button,
.rank,
.hero,
.a11y-size-options button,
.a11y-option,
.a11y-reset,
.a11y-done,
.a11y-close {
  transition: transform .2s cubic-bezier(.16, 1, .3, 1),
              background-color .2s ease,
              border-color .2s ease,
              box-shadow .2s ease,
              color .2s ease,
              opacity .2s ease;
}

/* ==========================================================================
   2. Top Navigation Bar & Brand Controls
   ========================================================================== */

/* Club Brand Trigger */
.brand:hover,
#homeBtn:hover {
  transform: translateY(-1px);
}
.brand:hover .logo.club,
#homeBtn:hover .logo.club {
  filter: drop-shadow(0 0 10px rgba(249, 176, 54, .4));
  transform: scale(1.04);
}
.brand:active,
#homeBtn:active {
  transform: scale(.97);
}

/* Primary Blizzard Navigation Links */
.blz-nav-link {
  position: relative;
}
.blz-nav-link:hover,
.blz-nav-link:focus-visible {
  color: #ffffff !important;
}
.blz-nav-link:hover span,
.blz-nav-link:focus-visible span {
  text-shadow: 0 0 12px rgba(255, 255, 255, .35);
}
.blz-nav-link:active {
  transform: scale(.96);
}

/* Language Switcher Button */
.blz-lang-btn:hover,
.blz-lang-btn:focus-visible,
.lang.blz-lang-btn:hover,
.lang.blz-lang-btn:focus-visible {
  border-color: rgba(249, 176, 54, .55);
  background: rgba(249, 176, 54, .1);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(249, 176, 54, .25);
  transform: translateY(-1px);
}
.blz-lang-btn:active,
.lang.blz-lang-btn:active {
  transform: scale(.95);
}

/* Accessibility Quick Trigger */
.a11y-trigger:hover,
.a11y-trigger:focus-visible {
  border-color: #f9b036;
  background: rgba(249, 176, 54, .16);
  color: #ffffff;
  box-shadow: 0 0 18px rgba(249, 176, 54, .3);
  transform: translateY(-1px);
}
.a11y-trigger:active {
  transform: scale(.95);
}

/* Mobile Menu Hamburger Toggle */
.blz-mobile-toggle:hover,
.blz-mobile-toggle:focus-visible {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: #ffffff;
}
.blz-mobile-toggle:active {
  transform: scale(.94);
}

/* Mobile Drawer Links (Direction-Aware) */
[dir="rtl"] .blz-drawer-link:hover,
html[lang="ar"] .blz-drawer-link:hover {
  transform: translateX(-6px);
  background: rgba(249, 176, 54, .1);
  border-inline-start: 3px solid #f9b036;
  color: #ffffff;
}
[dir="ltr"] .blz-drawer-link:hover,
html[lang="en"] .blz-drawer-link:hover {
  transform: translateX(6px);
  background: rgba(249, 176, 54, .1);
  border-inline-start: 3px solid #f9b036;
  color: #ffffff;
}

/* ==========================================================================
   3. Primary & Secondary Call-To-Action Buttons
   ========================================================================== */

/* Signature Play / Sign-Up CTA */
.blz-btn-play:hover,
.blz-btn-play:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.12);
  box-shadow: 0 0 28px rgba(240, 100, 20, .55), 0 8px 24px rgba(0, 0, 0, .4);
}
.blz-btn-play:active {
  transform: translateY(0) scale(.97);
  box-shadow: 0 0 14px rgba(240, 100, 20, .4);
}

/* Standard Button */
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.btn:active {
  transform: scale(.97);
}

/* Ghost / Secondary Button */
.btn.ghost:hover,
.ghost:hover,
.btn.ghost:focus-visible,
.ghost:focus-visible {
  border-color: #f9b036;
  background: rgba(249, 176, 54, .1);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 0 16px rgba(249, 176, 54, .2);
}
.btn.ghost:active,
.ghost:active {
  transform: scale(.97);
}

/* Direction-Aware Back Buttons */
[dir="rtl"] #surveyReturnHomeBtn:hover,
[dir="rtl"] .legal-back:hover,
html[lang="ar"] #surveyReturnHomeBtn:hover,
html[lang="ar"] .legal-back:hover {
  transform: translateX(4px);
  color: #f9b036;
  border-color: rgba(249, 176, 54, .45);
}
[dir="ltr"] #surveyReturnHomeBtn:hover,
[dir="ltr"] .legal-back:hover,
html[lang="en"] #surveyReturnHomeBtn:hover,
html[lang="en"] .legal-back:hover {
  transform: translateX(-4px);
  color: #f9b036;
  border-color: rgba(249, 176, 54, .45);
}

/* ==========================================================================
   4. Interactive Landing Cards & Feature Surfaces
   ========================================================================== */

/* About Section Feature Cards */
.lp-about-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 176, 54, .4);
  background: linear-gradient(160deg, rgba(29, 35, 53, .98), rgba(15, 18, 28, .98));
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8), 0 0 24px rgba(249, 176, 54, .1);
}

/* Tournament Stage Cards */
.lp-stage-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 176, 54, .4);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8), 0 0 24px rgba(249, 176, 54, .1);
}

/* Role Showcase Cards */
.lp-role-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .8);
}
.lp-role-card:hover .lp-role-icon {
  transform: scale(1.08) rotate(3deg);
  border-color: rgba(249, 176, 54, .5);
}

/* Tournament Mode Selector Pill */
.sh-pill:hover,
.sh-pill:focus-visible {
  transform: translateY(-3px);
  border-color: #f9b036;
  background: linear-gradient(145deg, rgba(46, 39, 42, .98), rgba(17, 20, 30, .98));
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .92), 0 0 22px rgba(249, 176, 54, .15);
}
.sh-pill:active {
  transform: scale(.98);
}
[dir="rtl"] .sh-pill:hover .sh-pill-arrow,
html[lang="ar"] .sh-pill:hover .sh-pill-arrow {
  transform: rotate(180deg) translateX(4px);
}
[dir="ltr"] .sh-pill:hover .sh-pill-arrow,
html[lang="en"] .sh-pill:hover .sh-pill-arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   5. Form Controls & Survey Selectors
   ========================================================================== */

/* Segmented Choice Buttons */
.seg button:hover,
.seg button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(249, 176, 54, .5);
  background: rgba(249, 176, 54, .08);
  color: #ffffff;
}
.seg button:active {
  transform: scale(.97);
}

/* Filter / Selection Chips */
.chips button:hover,
.chips button:focus-visible {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(249, 176, 54, .5);
  background: rgba(249, 176, 54, .1);
  color: #ffffff;
}
.chips button:active {
  transform: scale(.96);
}

/* Rank Tier Badges */
.rank:hover,
.rank:focus-visible {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(249, 176, 54, .6);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7), 0 0 18px rgba(249, 176, 54, .25);
}
.rank:active {
  transform: scale(.97);
}

/* Hero Portrait Badges */
.hero:hover,
.hero:focus-visible {
  transform: translateY(-3px) scale(1.04);
  border-color: #f9b036;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7), 0 0 18px rgba(249, 176, 54, .3);
}
.hero:active {
  transform: scale(.97);
}

/* Form Inputs and Selects */
input[type="text"]:hover,
input[type="tel"]:hover,
select:hover {
  border-color: rgba(255, 255, 255, .25);
}
input[type="text"]:focus,
input[type="tel"]:focus,
select:focus {
  border-color: #f9b036;
  box-shadow: 0 0 0 3px rgba(249, 176, 54, .22);
}

/* ==========================================================================
   6. Accessibility Modal Interactive Elements
   ========================================================================== */

/* Close Button with Elegant Rotation */
.a11y-close:hover,
.a11y-close:focus-visible {
  transform: rotate(90deg) scale(1.08) !important;
  color: #ff4757 !important;
  border-color: rgba(255, 71, 87, .5) !important;
  background: rgba(255, 71, 87, .12) !important;
  box-shadow: 0 0 16px rgba(255, 71, 87, .25) !important;
}
.a11y-close:active {
  transform: scale(.94) !important;
}

/* Size and Motion Segmented Options */
.a11y-size-options button:hover,
.a11y-size-options button:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(249, 176, 54, .5);
  background: #1b2131;
  color: #ffffff;
}
.a11y-size-options button:active {
  transform: scale(.97);
}

/* Feature Toggle Rows */
.a11y-option:hover,
.a11y-option:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(249, 176, 54, .45);
  background: #181e2c;
  color: #ffffff;
}
.a11y-option:active {
  transform: scale(.98);
}

/* Reset Button */
.a11y-reset:hover,
.a11y-reset:focus-visible {
  border-color: #ec6338;
  color: #ffffff;
  background: rgba(236, 99, 56, .12);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(236, 99, 56, .18);
}
.a11y-reset:active {
  transform: scale(.97);
}

/* Done Button */
.a11y-done:hover,
.a11y-done:focus-visible {
  filter: brightness(1.1);
  box-shadow: 0 10px 24px rgba(240, 100, 20, .3);
  transform: translateY(-1px);
}
.a11y-done:active {
  transform: scale(.97);
}

/* ==========================================================================
   7. Footer Institutional Navigation Links (Direction-Aware)
   ========================================================================== */

/* Direction-Aware Lateral Motion for Footer Links */
[dir="rtl"] .sf-links a:hover,
[dir="rtl"] .sf-link-btn:hover,
html[lang="ar"] .sf-links a:hover,
html[lang="ar"] .sf-link-btn:hover {
  transform: translateX(-4px) translateY(-1px);
  color: #ffffff;
  border-color: rgba(249, 176, 54, .55);
  background: rgba(249, 176, 54, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
[dir="ltr"] .sf-links a:hover,
[dir="ltr"] .sf-link-btn:hover,
html[lang="en"] .sf-links a:hover,
html[lang="en"] .sf-link-btn:hover {
  transform: translateX(4px) translateY(-1px);
  color: #ffffff;
  border-color: rgba(249, 176, 54, .55);
  background: rgba(249, 176, 54, .08);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.sf-links a:active,
.sf-link-btn:active {
  transform: scale(.97);
}

/* ==========================================================================
   8. Footer Social Channels (Pure CSS Hover Feedback, Zero Tooltips)
   ========================================================================== */

/* Base channel button */
.sf-channel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #c4c9d8;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1),
              border-color .22s ease,
              background-color .22s ease,
              box-shadow .22s ease,
              color .22s ease;
}
.sf-channel svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1), fill .22s ease;
}

/* Discord: Rich, Vibrant Pure CSS Hover */
.sf-channel.channel-discord:hover,
.sf-channel.channel-discord:focus-visible {
  background: #5865f2 !important;
  border-color: #5865f2 !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(88, 101, 242, .65), 0 8px 20px rgba(0, 0, 0, .45) !important;
  transform: translateY(-4px) scale(1.12) !important;
}
.sf-channel.channel-discord:hover svg,
.sf-channel.channel-discord:focus-visible svg {
  transform: scale(1.1);
  fill: #ffffff !important;
}

/* X (Twitter): Rich, Vibrant Pure CSS Hover */
.sf-channel.channel-x:hover,
.sf-channel.channel-x:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
  box-shadow: 0 0 24px rgba(255, 255, 255, .6), 0 8px 20px rgba(0, 0, 0, .45) !important;
  transform: translateY(-4px) scale(1.12) !important;
}
.sf-channel.channel-x:hover svg,
.sf-channel.channel-x:focus-visible svg {
  transform: scale(1.1);
  fill: #000000 !important;
}

/* WhatsApp: Rich, Vibrant Pure CSS Hover */
.sf-channel.channel-whatsapp:hover,
.sf-channel.channel-whatsapp:focus-visible {
  background: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  box-shadow: 0 0 24px rgba(37, 211, 102, .65), 0 8px 20px rgba(0, 0, 0, .45) !important;
  transform: translateY(-4px) scale(1.12) !important;
}
.sf-channel.channel-whatsapp:hover svg,
.sf-channel.channel-whatsapp:focus-visible svg {
  transform: scale(1.1);
  fill: #ffffff !important;
}

/* Tactile Active Press */
.sf-channel:active {
  transform: translateY(0) scale(.94) !important;
}

/* STRICT RULE: Zero tooltips, zero speech bubbles, zero floating pseudo-elements */
.sf-channel::before,
.sf-channel::after,
.channel-discord::before,
.channel-discord::after,
.channel-x::before,
.channel-x::after,
.channel-whatsapp::before,
.channel-whatsapp::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   9. Reduced Motion Compliance
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .blz-nav-link,
  .brand,
  .blz-lang-btn,
  .a11y-trigger,
  .blz-mobile-toggle,
  .blz-drawer-link,
  .blz-btn-play,
  .btn,
  .ghost,
  .sf-links a,
  .sf-link-btn,
  .sf-channel,
  .lp-about-card,
  .lp-stage-card,
  .lp-role-card,
  .sh-pill,
  .seg button,
  .chips button,
  .rank,
  .hero,
  .a11y-size-options button,
  .a11y-option,
  .a11y-reset,
  .a11y-done,
  .a11y-close {
    transform: none !important;
    transition: background-color .15s ease,
                border-color .15s ease,
                color .15s ease,
                box-shadow .15s ease !important;
  }
}

html.a11y-reduce-motion .blz-nav-link,
html.a11y-reduce-motion .brand,
html.a11y-reduce-motion .blz-lang-btn,
html.a11y-reduce-motion .a11y-trigger,
html.a11y-reduce-motion .blz-mobile-toggle,
html.a11y-reduce-motion .blz-drawer-link,
html.a11y-reduce-motion .blz-btn-play,
html.a11y-reduce-motion .btn,
html.a11y-reduce-motion .ghost,
html.a11y-reduce-motion .sf-links a,
html.a11y-reduce-motion .sf-link-btn,
html.a11y-reduce-motion .sf-channel,
html.a11y-reduce-motion .lp-about-card,
html.a11y-reduce-motion .lp-stage-card,
html.a11y-reduce-motion .lp-role-card,
html.a11y-reduce-motion .sh-pill,
html.a11y-reduce-motion .seg button,
html.a11y-reduce-motion .chips button,
html.a11y-reduce-motion .rank,
html.a11y-reduce-motion .hero,
html.a11y-reduce-motion .a11y-size-options button,
html.a11y-reduce-motion .a11y-option,
html.a11y-reduce-motion .a11y-reset,
html.a11y-reduce-motion .a11y-done,
html.a11y-reduce-motion .a11y-close {
  transform: none !important;
  transition: background-color .15s ease,
              border-color .15s ease,
              color .15s ease,
              box-shadow .15s ease !important;
}